一起优化前端性能

一起优化前端性能

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
  

性能优化方向