前端性能优化自检表 - 2022

⭐️⭐️ 十分重要
⭐️ 重要

网络层面

• 使用cdn ⭐️⭐️
• 开启合适的缓存 ⭐️⭐️
• 开启gzip ⭐️⭐️
• 开启http2 ⭐️
• 所有的文件（html js css）都是压缩过的 ⭐️⭐️
• 减少域名
• 减少http请求
• 避免重定向
• 避免404
• 减少cookie携带

资源层面

• 无重复引用的文件 ⭐️⭐️
• 引用公司公共的cdn文件 ⭐️⭐️
• 无引用三方cdn的文件，如jsDelivr的cdn文件 ⭐️⭐️
• 减少包的引用，如moment、lodash ⭐️⭐️
• 资源预加载

架构层面

• 路由异步加载 ⭐️
• 组件按需引入，使用treeshaking
• 虚拟列表

图片层面

• 使用oss存储图片 ⭐️⭐️
• 使用webp、avif等先进格式的图片 ⭐️⭐️
• 做必要的懒加载、预加载 ⭐️
• 做图片必要的缩放，够用即可 ⭐️⭐️

js层面

• 不重要的内容异步加载
• 减少dom操作 ⭐️
• 防抖 & 节流
• 避免巨量的console.log

框架层面

• vue的 Keep alive
• react的shouldComponentUpdate、useMemo 减少组件额外渲染

特定条件可以使用的优化手段

• 服务端渲染
• web worker
• 前端缓存接口
• 大图片分割

那些过时/没啥明显效果的优化手段

• 图片精灵、图片base 64
• for循环缓存数组长度、精简dom
• css 数值为0不加单位、避免复杂选择器

最后

• 勤通过监测工具查看效果
• 性能优化没有终点，要看投入与收益，做到与业务开发平衡