360星计划-前端性能优化

一、RAIL模型

1、RAIL模型（Response Animation Idle Load）

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

延迟与用户反应：

2、响应：50ms处理事件

目标：

• 在100ms内响应用户输入

指导：

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

为什么是50ms？

• 假如应用程序是以推进的50ms块区间来处理用户输入事件，当在50ms块区间输入事件，排队时间高达50ms，只有处理事件时间低于50ms，才能保证在100ms内响应。
  

3、动画：10ms一帧

目标：

• 10ms或更短的时间内生成一帧
• 10ms=（1000/60帧~16.666ms）-6ms（渲染帧的预算）
• 视觉平滑

指导：

• 在动画这样的高压点下，尽量不要处理逻辑，提高达到60fps的机会
• 动画类型
  • 滚动：包括甩动，及用户开始滚动，然后放开，页面继续滚动
  • 视觉动画：包括入口和出口、补间和加载指示器
  • 拖拽动画通常跟随用户交互，包括地图平移和缩放

4、空闲时间最大化

目标：

• 最大化空闲时间以增加页面在100ms内响应用户输入的几率

指导：

• 利用空闲时间完成推迟的工作
• 空闲时间期间用户交互优先级最高

5、5s呈现交互内容

目标：

• 首屏加载连接3G缓慢的中档移动设备5s内呈现交互内容
• 非首屏加载应该在2s内完成

指导：

• 测试用户常用设备和网络连接情况的性能
• 优化关键渲染路径以解除阻止渲染
• 启用渐进式渲染和在后台执行一些工作
• 影响加载性能的因素：网络速度、硬件（CPU）、解析JavaScript

6、关键指标

1、响应：在100ms内响应用户输入
2、动画：动画或滚动时，10ms产生一帧
3、空闲时间：主线程空闲时间最大化
4、加载：在100ms内呈现交互内容
5、以用户为中心

二、评估性能的工具

1、lighthouse（集成到谷歌audits工具中）

功能：

• 选择设备类型（mobile、desktop）
• 性能（performance）
• 渐进式应用（progressive web app）
• 最大实践（best practice）
• 无障碍性（accessibility）
• SEO优化
• 同时可以限制CPU能力

出来的报告是关于性能和SEO的评分，会给出一些优化建议。

2、webpage test（网站）

提供自己的网站地址，发到服务端，在终端模拟器上审计一些性能，然后再把报告发回。

3、chrome DevTools

三、实战

1、浏览器渲染场景

layout和paint不是必要的步骤，在改变某些属性时可能不需要重新layout或paint。

每个样式在不同浏览器css改变影响范围的网站：csstriggers.com

2、浏览器渲染流程

渲染机制：寻找祖先节点，看是否有图形上下文，然后和祖先节点共一个图形上下文。（paint）

3、chrome面板功能介绍

console：控制台面板（可以用来打印信息）
elements：显示元素的布局情况
source：源代码面板（查看整个站点的资源）
network：显示一些请求和静态文件的加载时序
performance：性能面板
memory：内存面板
application：关于存储
audits：审计（lighthouse集成）

4、怎么分析网站性能（performance）

screenshots：截图，在录制的过程中浏览器进行截屏

点击main可以查看具体信息，点击有红角的任务可以看到这次任务发生的具体情况，会有一个链接链接到原代码：

链接到源代码后，可以看到每行耗费的时间，从而知道性能瓶颈处：

4、性能优化方向

1、加载：

• 资源效率优化
• 图片优化
• 字体优化
• 关键渲染路径优化

2、渲染：

• JavaScript执行优化
• 避免大型复杂的布局
• 渲染层合并