前端性能优化体系
2023-03-13 23:15:16 33 举报AI智能生成
前端性能优化相关知识点
作者其他创作
大纲/内容
性能指标
三大核心指标
LCP（Large Contentful Paint） 最大内容绘制
FID （First Input Delay）首次输入延迟
CLS （Cumulative Layout Shift）累计布局偏移
其他指标
FP （First Paint）首次绘制
FCP（First Contentful Paint） 首次内容绘制
FMP （First Meaningful Paint） 首次有意义绘制
DCL （DOM Conent Loaded）DOM 解析完成
L （Onload Event） onload 时间触发
SI （Speed Index）速度指数
FSP （First Screen Paint）首屏绘制时间
TTI （Time To Intereactive）首次可交互时间
TTFB （Time To First Byte）接收受字节时间
TBT （Total Blocking Time）阻塞总时间
性能衡量工具
Chrome Detools
WebPage Test
Lighthouse
web-vitals
性能监控
寻找性能瓶颈
性能指标采集上报
优化手段
网络
静态资源使用CDN
减少不必要的HTTP请求
使用HTTP2
HTTP缓存
强缓存
协商缓存
启用 Gzip压缩
图片
图片压缩
懒加载/延迟加载
缩略图
web works
服务端渲染 SSR
减少打包体积
压缩资源体积
动态导入
Tree Shaking
使用更小的库代替
使用事件委托
CSS
降低CSS选择器的复杂性
保持简单，不过多嵌套
通配符和属性选择器效率最低
不使用类选择器和ID选择器修饰元素标签
使用transform 和 opacity 属性来实现动画 不触发重绘和回流
渲染优化
减少重绘重排
优化高频事件
防抖
节流
优化动画
优先使用css来实现动画
translateZ/translate3D开启硬件加速， will-change
合理使用 requestAnimationFrame代替setTimeout
虚拟列表
保持库版本最新
去除生产环境log
预加载
preload：提前加载较晚出现，但对当前页面非常重要的资源，优先级高
prefetch：提前加载后续路由需要的资源，优先级低
0 条评论
下一页
为你推荐
查看更多
