前端性能优化备忘录
本文记录了通用场景下需要检查的优化事项,不包括如虚拟滚动、animation合成层等特殊场景下的优化。
重中之重!检查你的服务器是否开启了
gzip
。
如何检查?Devtools - Network - Headers - Response Headers,查看content-encoding
字段是否为gzip
重中之重!检查你的代码是否开启了生产模式。生产模式和开发模式下的代码size可能相差10倍!
检查代码中引用到的图片资源是否进行了压缩。一张大背景图,经过简单的压缩有可能减少90%的体积。非常好用的图片压缩在线网站 squoosh
检查你的接口响应时间。这里可以将devtools 里的ttfb认为是接口响应时间,如果你的TTFB超过100ms,用户就能感知到延迟!超过3秒的赶紧找后端定位问题优化去吧!
项目在匆忙上线的时候,后端同学往往没时间对数据库查询进行索引优化。仅仅对数据库索引进行优化都有可能减少大量的等待时间。如果能引入缓存,响应时间还能进一步缩短。
如何检查?Devtools - Network - Waterfall - Waiting(TTFB)静态资源,如css、js、图片等,能上 CDN 还是上 CDN 吧。如果你服务的用户是全球用户,请注意你的服务商是否提供了全球节点支持。阿里云的 CDN 是区分纯国内和全球的。
请检查你的静态资源是否开启了强缓存,即使条件受限,如无法将你的静态资源用hash命名,也需要检查是否开启了304协商缓存。
在低网速和低CPU下,测试你的网站打开时的效果。
如何开启?Devtools - Performance录制你的网站,检查是否存在抖动。一瞬间的抖动也会让用户觉得你的网站不够丝滑。
如何录制?Devtools - Performance,点击小红框按钮 Chrome 会自动刷新页面并录制页面。页面加载完成后停止录制,鼠标悬浮在长条红框逐帧检查是否抖动。相信我,你一眼就能看出来是否发生了抖动。