第六届360前端星计划_前端性能优化

前端性能优化

主讲人

• 饶占平
• 360前端技术专家
• 奇舞团

分为三部分：

• RAIL 模型定义 标准
• 工具篇
• 实践篇

1. RAIL 模型评估性能
   以用户为中心的性能模型，每个网络应用语气声明周期有关的四个部分，而且这些方面以不同的方式影响性能。

• response
• animation
• idle
• load
  评估影响用户体验因素也是这4个
  rail模型从内容上分为：
• 指导
  推荐的性能评估标准；性能评估标准，往往依赖于硬件，随时间改变

• 目标
  倾向恒定指标，人对外界事物延迟恒定的：不会改变
  了解一下人类如何感知延迟：

  
  
  捕获.PNG

响应：50ms处理事件

1. 目标：
   在100ms内响应用户输入
2. 指导：
   50ms内处理用户输入，确保100ms内反馈用户科室的响应
   对于大开销的任务可分为任务处理

捕获1.PNG

刚好输入事件，刚好高达50ms
如下：
动画10ms
1000ms/60贞 = 16ms -6ms =10ms

1.PNG

使用RALL模型评估性能

RALL模型：以用户为中心的性能模型，每个网络应用都具有与生命周期有关的四个方面，而且这些方面以不同的方式影响着性能。

延迟与用户反应

响应：50ms处理事件
目标：在100ms内响应用户输入
指导
50ms内处理用户输入事件，确保100ms内反馈用户可视的响应。
对于开销大的任务可分隔任务处理，或放到worker进程中执行，避免影响用户交互。
处理时间超过50ms的操作，始终给与反馈（进度和活动指示器）
50ms or 100ms

动画：10ms 一帧
目标
10ms或更短的时间内生成一帧

视觉平滑
指导
1）在动画这样的高压点，尽量不要处理逻辑。提高达到60fps的机会
2）动画类型：
滚动。包括甩动，及用户开始滚动，然后放开，页面继续滚动
视觉动画。包括入口和出口、补间和加载指示器
拖拽动画通常跟随用户交互，包括地图平移和缩放
空闲时间最大化
目标：最大化空闲时间以增加页面在100ms内响应用户输入的几率
指导
利用空闲时间完成推迟的工作
空闲时间期间用户交互优先级最高
加载：5s呈现交互内容
目标
首屏加载连续3G缓慢的中档移动设备5s内呈现可交互内容
非首屏加载应该在2s内完成
指导
1）测试用户常用设备和网络连接情况的性能
2）优化关键渲染路径以解除阻止渲染
3）启用渐进式渲染和在后台执行一些工作
4）影响加载性能的因素：网络速度、硬件、解析JavaScript
关键指标
响应：在100ms内响应用户输入
动画：动画或滚动时，10ms产生一帧
空闲时间：主线程空闲时间最大化
加载：在1000ms内呈现交互内容
以用户为中心
二、工具篇
评估性能的工具

Lighthouse
WebPageTest
Chrome DevTools
三、实战篇
浏览器渲染流程
JavaScript（实现动画、操作DOM等）
Style（Render Tree）
Layout（盒模型，确切的位置和大小）
Paint（栅格化）
Composite（渲染层合并）
浏览器渲染场景

部分详细笔记如图：

3.PNG

4.PNG

5.PNG

6.PNG

7.PNG

8.PNG

实战篇

3.1.PNG

9.PNG