跳到主要内容

性能指标与测量

核心指标分别衡量什么, 如何优化？​

指标含义优化方向
FCP浏览器呈现第一个 DOM 需要的时间优化 JS、CSS、静态文件、字体
LCP视口中最大内容元素显示的时间同 FCP
TTI页面变成完全可交互需要的时间优化 JS、最小化主线程工作
TBTFCP 到 TTI 之间阻塞用户输入的总时间同 TTI
SI页面加载期间视觉显示的速度同 TTI
CLSDOM 从渲染到隐藏期间的累计布局偏移消除无尺寸资源与动态注入

CLS 由哪些原因造成？​

  • 无尺寸的图片;
  • 无尺寸的 iframe;
  • 动态注入的内容;

RAIL 模型的四项要求是什么？​

  • Response: 用户交互的响应时间小于 100ms;
  • Animation: 动画在 16ms 内绘制完成;
  • Idle: 无用户输入与事件触发的时间尽量短;
  • Load: 页面加载时间尽量短;

用哪些工具测量这些指标？​

  • 浏览器开发者工具:
    • NetWork 面板: 请求与资源加载;
    • Performance 面板: 主线程活动与帧率;
    • Lighthouse 面板: 综合评分与优化建议;
  • Web 性能优化工具: WebPage Test;
  • 帧率监控见 渲染阻塞与优化;