前端性能优化
为什么进行性能优化?发现网站和应用的性能瓶颈,提高用户体验
怎么进行性能优化?接下来进行阐述。
1. 使用RAIL模型评估性能
1.1 RAIL
以用户为中心的性能模型,每个网络应用都具有与其声明周期有关的四个方面,这些方面以不同的方式影响着性能。
延迟与用户反应:
1.2 Response:50ms处理事件
- 目标:在100ms内响应用户输入
- 指导
- 50ms内处理用户输入事件,确保100ms内反馈用户可视化的响应
- 对于开销大的任务可作分隔任务处理,或放到worker进程中执行,避免影响用户交互
- 处理事件超过50ms的操作,始终给予反馈(进度和活动指示器)
1.3 动画:10ms一帧
- 目标:10ms(1000ms/60帧-6ms(渲染帧的预算))或更短的时间内生成一帧,并且视觉要平滑
- 指导:在动画的高压点,尽量不要处理逻辑。动画类型(滚动、视觉动画、拖曳动画)
1.4 空闲时间最大化
- 目标:最大化空闲时间以增加页面在100ms内响应用户输入的几率
- 指导:利用空闲时间完成推迟的工作,空闲时间期间用户交互优先级最高
1.5 加载:5s呈现交互内容
- 目标:首屏加载5s内呈现可交互内容,非首屏加载应在2s内完成
- 指导
- 测试用户常用设备和网络连接情况的性能
- 优化关键渲染路径以解除阻止渲染
- 启动渐进式渲染和在后台执行一些工作
- 影响加载性能的因素:网络速度、硬件(CPU)、解析JavaScript
1.6 关键指标总结
- 响应:在100ms内响应用户输入
- 动画:动画或滚动时,10ms产生一帧
- 空闲时间:主线程空闲时间最大化
- 加载:在1000ms内呈现交互内容
- 以用户为中心
2. 评估性能的工具
- Lighthouse
- WebPageTest
- Chrome DevTools
3. 实战篇
3.1 浏览器渲染流程
- JavaScript(实现动画、操作dom等)
- Style(将HTML和CSS合成Render Tree)
- Layout (产出盒模型,确切的位置和大小)
- Paint (栅格化,显示)
- Composite(渲染层合并)
3.2 浏览器渲染场景:
网站:csstriggers.com
3.3 性能优化方向
- 加载
- 资源效率优化
- 图片优化
- 字体优化
- 关键渲染路径优化
- 渲染
- JavaScript 执行优化
- 避免大型复杂的布局
- 渲染层合并