前端性能优化
February 15, 2023
性能监测 #
监测方式: devtool performance tab, lighthouse(lab data) 插件
window.performance， 可编程的性能 api
性能指标 #
分类:
-
In the field 用户实际体验到的指标
-
In the lab 利用工具去跑性能指标数据
常用指标：
-
FP
First Paint 首次绘制
-
FCP
First Contentful Paint 首次内容绘制
-
TTFB
Time to First Byte
-
LCP
Core Web Vital
Largest Contentful Paint 最大内容绘制
用来衡量页面的加载性能，2.5s 以内最佳
-
FID
Core Web Vital
First Input Delay 首次输入延迟
用来衡量可交互性， 100ms 以内为佳
-
CLS
Core Web Vital
Cumulative Layout Shift 累积布局偏移
用来衡量 visual stability. pages should maintain a CLS of 0.1. or less
当元素初次渲染到 dom 后又移位了，会发生 CLS
-
TTI
Time To Interactive 可交互时间
-
TBT
Total Blocking Time 总阻塞时间
-
FMP
First Meaningful Paint，在 lighthouse 6.0 中已经被废弃，考虑用 LCP
HTML 优化 #
-
将 CSS 放在文件头部，JavaScript 文件放在底部
css 的加载不会影响 dom 树的构建，但会影响最终的 render tree 的构建，所以放头部优先加载，如果放底部的话，加载就慢了，要早点下载下来用于构建 cssom
JS 引擎是独立于渲染引擎存在的, js 的加载和执行会阻塞渲染, 所以要放在底部，等 dom 树构建完加载并执行 js，某些 js 也可以加上 async defer 属性
async: 谁先加载完谁先执行, 不阻塞 render tree 的构建， 独立第三方脚本，广告等。执行顺序无关联的脚本
defer: 异步并行加载，不阻塞 render tree 构建，全加载完成后， 谁的位置靠前谁先执行，在 DOMContentLoaded 之前执行完
-
使用字体图标 iconfont 代替图片图标，压缩字体文件
-
prefetch preload
-
DNS 预解析
-
服务端渲染
针对移动端，首屏体验要求高，需要 SEO 的场景
CSS 优化 #
- 尽量避免使用 @import
网络层面优化 #
- 减少请求次数，减少请求体积
- 使用 HTTP2
- 静态资源使用 CDN, 减少客户端到服务器之间的物理链路长度，提升传输效率
- Gzip 压缩
- 合理的使用缓存，文件 hash
Webpack 性能优化 #
合理拆包 #
-
动态加载
ES2020 dynamic `import()`
-
SplitChunkPlugin
Tree-Shaking #
图片优化 #
图片格式 #
-
JPEG/JPG
有损压缩、体积小、加载快、不支持透明
-
WebP
WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。
缺点：有兼容性问题
优化手段 #
-
图像压缩
减少网络上需要传输的流量
-
图片延迟加载
当图片出现在浏览器的可视区域时，才去加载真正的图片
-
雪碧图(CSS Sprites)
它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好
-
响应式图片
根据客户端设备情况下发适当分辨率的图片，有助于减少网络流量
JavaScript 优化 #
- 使用位操作
React 性能优化 #
- shouldComponentUpdate，不需要更新时，return false，避免 re-render
- 使用 React.PureComponent，自动比较 props 和 state