监测工具与优化指标读书学习笔记

监测工具与优化指标读书学习笔记，个人使用的固定模板，省得每次到处找，觉得可以的可以收藏起来，参考一下。

监测工具与优化指标

• RAIL测量模型
  • 响应Response
    • 指标
      • 从输入到响应在100ms内
    • 方案
      • 事件处理控制在50ms内
      • 复杂的js计算放倒后端
      • 超过50ms的提供一定的反馈，如进度条等
  • 动画Animation
    • 指标
      • 10ms 内一帧
    • 方案
      • 在动画的高压点上不去做其他 js 操作
  • 空闲Idle
    • 指标
      • 最大化空闲时间，以增大50ms内响应用户输入的几率
  • 加载Load
    • 指标
      • 传输内容到页面可交互的时间不超过5秒
    • 方案
      • 禁用渲染阻塞的资源，延后加载
      • 可以采用 lazy load，code-splitting 等 其他优化 手段
• Chrome Devtools
  • Network
    • 页面加载概览
    • waterfall
    • size
    • time
    • Capture screenshots
  • Performance
    • 交互阶段
    • 加载阶段
  • 其他功能
• Webpagetest
  • 在线性能分析
  • 本地部署
• Lighthouse
  • 性能 Performance
    • Metrics
      • First Contentful Paint
      • First Meaningful Paint
      • First CPU Idle
      • Time to Interactive
      • Speed Index
      • Estimated Input Latency
    • Opportunities
    • Diagnostics
  • 访问无障碍 Accessibility
  • 最佳实践 Best Practice
  • 搜索引擎优化 SEO
  • 最佳实践 Best Practice
• 性能测量APIs
  • 关键时间点
    • Navigation Timing
    • Resource Timing
  • 网络状态
    • Network APIs