什么是web前端
CS架构访问的是本地的资源
Web前端是动态地、增量地访问、加载资源的一个过程
请求过程中一些潜在的性能优化点 :joy:
- dns是否可以通过缓存减少dns查询时间？
- 网络请求的过程走最近的网络环境？
- 相同的静态资源是否可以缓存？
- 能否减少请求http请求大小？
- 减少http请求
-
服务端渲染
资源的合并与压缩
目的：
- 减少http请求数量
- 减少请求资源的大小
常见方式
- html压缩 （提升效果不太明显）
- css压缩
- js的压缩和混乱
- 文件合并
- 开启gzip
压缩
| html压缩 | css压缩 | JS压缩 |
|---|---|---|
| 使用在线网站进行压缩 | 无效代码删除 | 无效字符的删除 |
| nodejs提供了html-minifier工具 | css语义合并 | 剔除注释 |
| 后端模板引擎渲染压缩 | 代码语义的缩减和优化 | |
| 代码保护 |
其中，CSS压缩和JS压缩是比较重要的，JS的压缩和混乱可以保护业务逻辑
合并
不合并文件的问题
image
合并文件
问题
- 首屏渲染问题 （合并后JS文件较大）
- 使用框架的时候（如vue、react），页面的渲染是依赖于JS的，如果合并的JS较大，那么首屏渲染时间会比较大（如果没有使用SSR服务端渲染）
- 缓存失效问题
建议合并场景
- 公共库合并
- 不同页面的合并
- 见机行事，随机应变
