一起优化前端性能
一起优化前端性能
360前端星计划-第十二课
主讲：饶占平老师
RAIL模型
- 概念
RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能：
- 延迟与用户的反应
- 内容
1、目标:以用户为中心
2、指导 - 响应
1、目标：在 100 毫秒以内响应
2、指导：
为什么是在50ms内？ - 动画·
1、目标：在 10 毫秒内生成一帧
2、指导： - 空闲时间
1、目标：最大程度增加空闲时间以增加用户在100ms内响应用户的几率
2、指导： - 加载
1、目标：首屏加载连接3G缓慢的中档移动设备5s内呈现可交互内容///非首屏加载应该在2s内完成
2、指导：
工具篇
- Lighthouse
- WebPageTest
- Chrom DevTools
实战篇
- 浏览器渲染场景
JavaScript（实现动画、操作DOM等）
Style（Render Tree）
Layout（盒模型，确切的位置和大小）
Paint（栅格化）
Composite（渲染层合并）
Chrom DevTools=》performance