前端性能优化

## 指标

核心Web指标

• LCP 最大内容绘制 可视区域中最大内容元素变为可见的时间点 推荐2.5s内

• FID 首次输入延迟 用户首次与网站交互直到浏览器做出响应的时间 推荐小于100ms

• CLS 累计布局偏移 用户输入 500 毫秒内发生的布局偏移的偏移分数总和 推荐小于0.1

方法

网络

• 压缩代码体积

• 使用CDN加载静态资源

• 使用http2

• 使用节流等手段减少http请求

• 善用缓存

• 使用SSR替代SPA

渲染时

渲染阻塞

• 内联关键css，使用[css预加载](Link types: preload - HTML: HyperText Markup Language | MDN)

• 对script使用defer和async

资源加载

• 优化和压缩图片

• 略缩图和原图区分

• 图片懒加载

• 路由懒加载

运行时

• 减少DOM操作

• 避免js长时间占用(事件循环，影响渲染)

• 避免回流和重绘

高性能动画

• js动画 vs css动画

• 尽量使用transform和opacity

• 合理地使用 will-change 或 translateZ 提升移动的元素

• requestAnimationFrame替代定时器动画

其他技巧

• vue key的作用

• v-for和v-if一起使用的替代方案

• querySelector替代传统getElementById

• 新版flex布局比老版的float布局更优

• 避免使用大量的事件处理程序，尤其是输入处理程序。