前端性能优化备忘录

本文记录了通用场景下需要检查的优化事项，不包括如虚拟滚动、animation合成层等特殊场景下的优化。

1. 重中之重！检查你的服务器是否开启了 gzip 。
   如何检查？Devtools - Network - Headers - Response Headers，查看 content-encoding 字段是否为 gzip

   

2. 重中之重！检查你的代码是否开启了生产模式。生产模式和开发模式下的代码size可能相差10倍！

3. 检查代码中引用到的图片资源是否进行了压缩。一张大背景图，经过简单的压缩有可能减少90%的体积。非常好用的图片压缩在线网站 squoosh

4. 检查你的接口响应时间。这里可以将devtools 里的ttfb认为是接口响应时间，如果你的TTFB超过100ms，用户就能感知到延迟！超过3秒的赶紧找后端定位问题优化去吧！
   项目在匆忙上线的时候，后端同学往往没时间对数据库查询进行索引优化。仅仅对数据库索引进行优化都有可能减少大量的等待时间。如果能引入缓存，响应时间还能进一步缩短。
   如何检查？Devtools - Network - Waterfall - Waiting(TTFB)
   

5. 静态资源，如css、js、图片等，能上 CDN 还是上 CDN 吧。如果你服务的用户是全球用户，请注意你的服务商是否提供了全球节点支持。阿里云的 CDN 是区分纯国内和全球的。

6. 请检查你的静态资源是否开启了强缓存，即使条件受限，如无法将你的静态资源用hash命名，也需要检查是否开启了304协商缓存。

7. 在低网速和低CPU下，测试你的网站打开时的效果。
   如何开启？Devtools - Performance
   

8. 录制你的网站，检查是否存在抖动。一瞬间的抖动也会让用户觉得你的网站不够丝滑。
   如何录制？Devtools - Performance，点击小红框按钮 Chrome 会自动刷新页面并录制页面。页面加载完成后停止录制，鼠标悬浮在长条红框逐帧检查是否抖动。相信我，你一眼就能看出来是否发生了抖动。