前端工程性能优化

请求的流程

1. 重定向
2. 拉取缓存
3. DNS查询
4. 建立TCP链接
5. 发起请求
6. 接收响应
7. 处理HTML元素
8. 元素加载完成。

浏览器缓存

• from memory cache 指缓存来自内存
• from disk cache 指缓存来自硬盘。
• 服务器配置缓存

  响应头部看见Etag和Expires字段，就说明缓存配置成功了。

• 静态资源添加md5 hash后缀,避免浏览器命中强缓存,导致前后端文件无法同步。

资源打包压缩

• webpak
  • mini-css-extract-plugin 压缩CSS
• 后端可以配置 Gzip 传输压缩
  • 不要对图片文件进行Gzip压缩,效果适得其反

图片

• 需要用多大的图片时，就在服务器上准备好多大的图片，尽量固定图片尺寸,节省带宽
• 图片的 base64 看情况设置 limit

CDN

• 越贵的质量越好