360前端星计划—一起优化前端性能（饶占平）

为什么进行性能优化？发现网站和应用的性能瓶颈，提高用户体验
怎么进行性能优化？接下来进行阐述。

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 执行优化
  • 避免大型复杂的布局
  • 渲染层合并