性能指标总结

一月 12, 2021 2438

常见性能名词解释：

  • FP
    FP（全称“First Paint”，翻译为“首次绘制”） 是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间。
    注意：FP 不包含默认背景绘制，但包含非默认的背景绘制。
    通过 performance.getEntriesByType(‘paint’)，取第一个 pain 的时间。

  • FCP
    FCP（全称“First Contentful Paint”，翻译为“首次内容绘制”），顾名思义，它代表浏览器第一次向屏幕绘制 “内容”。
    注意：只有首次绘制文本、图片（包含背景图）、非白色的 canvas 或 SVG 时才被算作 FCP。
    通过 performance.getEntriesByType(‘paint’)，取第二个 pain 的时间，或者通过 Mutation Observer 观察到首次节点变动的时间。

    FP 与 FCP 这两个指标之间的主要区别是：FP 是当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做 FP。相比之下，FCP 指的是浏览器首次绘制来自 DOM 的内容。例如：文本，图片，SVG，canvas 元素等，这个时间点叫 FCP。FP 和 FCP 可能是相同的时间，也可能是先 FP 后 FCP。

  • FMP
    FMP(FirstMeaningfulPaint)是页面主要内容出现在屏幕上的时间, 这将是用户感知加载体验的主要指标。目前尚无标准化的定义, 因为很难以通用的方式去确定各种类型页面的关键内容。实践中,可以将页面评分最高的可见内容出现在屏幕上的时间作为 FirstMeaningfulPaint。

  • LCP
    LCP（Largest Contentful Paint），用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。

  • TTI
    TTI (Time to Interactive) 可交互时间，指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。

  • TBT
    TBT (Total Blocking Time) 页面阻塞总时长，TBT 汇总所有加载过程中阻塞用户操作的时长，在 FCP 和 TTI 之间任何 long task 中阻塞部分都会被汇总。

  • FID
    FID (First Input Delay) 首次输入延迟: 指标衡量的是从用户首次与您的网站进行交互（即当他们单击链接，点击按钮等）到浏览器实际能够访问之间的时间。
    为了在实验数据下预测 FID，通常会用 TBT。他们测量的内容不同，但改善 TBT 通常也能改善 FID。
    一个糟糕的 FID 主要原因是 JS 执行过长，优化 JS 的解析、编译、执行可以直接降低 FID。

  • CLS
    CLS (Cumulative Layout Shift) 累积布局偏移: 总结起来就是一个元素初始时和其 hidden 之间的任何时间如果元素偏移了, 则会被计算进去。

  • DCL
    DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载。

白屏时间与首屏时间

首屏和白屏时间，没有统一计算标准。以下总结只作为一个参考，最好在实际生产中要通过自身业务制定方法，而不是死记硬背一个方法来实现计算。

  1. 白屏时间：

    页面开始请求，到页面刚开始显示内容，叫做白屏时间，这个过程包括 dns 查询、建立 tcp 连接、发送首个 http 请求（如果使用 https 还要介入 TLS 的验证时间）、返回 html 文档、html 文档 head 解析完毕。

    浏览器绘制页面是渐进的，上到下解析，不需要等到所有 HTML 文档都解析完毕。在不断地接受内容的同时，引擎会将这部分内容解析并且显示出来。
    1、非可视化内容不会显示到窗口。浏览器绘制之前，肯定先解析 head。
    2、head 结束，解析 body。
    所以一般我们认为，开始解析 body 就是 页面开始解析的时间

    白屏时间 = 页面开始展示时间点 - 开始请求时间点；
    代码实现：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
      <head>
        <title>白屏时间</title>
        <link href="xxxxx" />
        <script>
          var endTime = new Date();
        </script>
      </head>
      <!-- 白屏时间 = endTime - performance.timing.navigationStart -->
      <body></body>
    </html>

  2. 首屏时间:

    首屏时间是指，在不滚动屏幕下的前提下，用户看到完整第一屏内容花费的时间;
    首屏内容完全加载完成，才叫首屏，而不是出现内容，或者部分元素没有展示;
    计算方式：

    1
    2
    var perfData = window.performance.timing; 
    var renderTime = perfData.domComplete - perfData.domLoading;

    但随着SPA模式的盛行，performance Api已经不能完全正确计算出首屏时间了，
    首屏计算目前也没有统一标准。阿里云前端监控团队采用深度优先遍历方法获取最高可见增量元素获取首屏时间值得借鉴，详细可见：https://zhuanlan.zhihu.com/p/44933789。

查看评论