360前端星计划之前端性能优化

RAIL模型

• 以用户为中心的性能评估模型（Response、Animation、Idle、Load）
• 目标：恒定的指标；指导意见：推荐的性能评估标准
• 延迟与用户反应
  • 0-16ms，动画平滑转场
  • 0-100ms，立即获得结果
  • 300ms-1000ms，延迟正常
  • .>1s，用户注意力将离开
• 响应：在100ms内响应用户输入
  • 50ms处理事件（事件排队时间高达50ms）
  • 开销大的任务分成微任务处理，避免影响用户交互
  • 处理时间超过50ms，要给予用户反馈
• 动画：10ms或更短时间生成一帧
  • 10ms=(1000ms/60帧)-6ms（渲染帧的预算）
  • 视觉平滑
  • 尽量不要处理逻辑，提高达到60fps的机会
  • 动画类型：滚动、视觉动画、拖曳动画
• 空闲时间最大化：增加页面在100ms内响应用户输入的几率
  • 利用空闲时间完成推迟的工作，例如预加载数据
  • 空闲时间用户交互优先级最高
• 加载：5s呈现交互内容
  • 首屏加载连接3G5s内呈现可交互内容
  • 非首屏加载应该在2s内完成
  • 测试用户常用设备和网络连接的性能
  • 优化关键渲染路径以解除阻止渲染
  • 启用渐进式渲染和在后台执行一些工作
  • 影响加载性能：网络速度、硬件、解析JS
• 关键指标
  • 100ms内响应
  • 动画10s产生一帧
  • 空闲时间最大化
  • 1000ms内呈现交互内容
  • 以用户为中心

工具

• LightHouse：实现无障碍性和SEO优化，报返为性能评分和优化建议
• WebPageTest：审计网站性能
• Chrome DevTools

实战

• 浏览器渲染场景：
  
• 浏览器渲染流程
  
  • JS（实现动画，操作DOM等）
  • Style（渲染树）
  • Layout（确切的位置和大小）
  • Paint（栅格化）
  • Composite（渲染层合并）
    • 渲染层不是单独的图形层，寻找一个拥有图形上下文的祖先节点，合并到一个图形层中
  • 使用transform减少布局和重绘
  • 总结
    • 加载
      • 资源效率优化
      • 图片优化
      • 字体优化
      • 关键渲染路径优化
    • 渲染
      • JS执行优化
      • 避免大型复杂的布局
      • 渲染层的合并