前端性能优化备忘录

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

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

    Devtools - Network

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

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

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

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

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

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

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

Author

David Lv

Posted on

2022-02-28

Updated on

2022-07-15

Licensed under