前端性能优化体系
2023-03-13 23:15:16 24 举报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
使用更小的库代替
减少打包体积
使用事件委托
保持简单，不过多嵌套
通配符和属性选择器效率最低
不使用类选择器和ID选择器修饰元素标签
降低CSS选择器的复杂性
使用transform 和 opacity 属性来实现动画 不触发重绘和回流
CSS
减少重绘重排
防抖
节流
优化高频事件
优先使用css来实现动画
translateZ/translate3D开启硬件加速， will-change
合理使用 requestAnimationFrame代替setTimeout
优化动画
虚拟列表
渲染优化
保持库版本最新
去除生产环境log
preload：提前加载较晚出现，但对当前页面非常重要的资源，优先级高
prefetch：提前加载后续路由需要的资源，优先级低
预加载
优化手段
前端性能优化体系
0 条评论
回复 删除
下一页
