【前端八股】系列之性能指标与评估工具

前言

这里是以前自己关于性能指标与评估工具的相关笔记，下面主要是关于性能指标的定义与特性以及相关的评估工具，并没有记录深入。

下面是推荐阅读的博客：
前端性能优化-性能指标 - 掘金

性能指标的定义和特性

性能是相对的！！！！

网页的加载速度，响应速度等会受到网速，设备等指标的影响，所以这个时候需要进行一些定量测量的客观标准来评价性能。

长久以来，网络性能都是通过load事件进行测量的。然而，尽管load是页面生命周期中明确定义的时刻，但该时刻并不一定与用户在意的任何方面相对应。

是否正在发生？	导航是否成功启动？服务器有响应吗？
是否有用？	是否渲染了足够的内容让用户可以深入其中？
是否可用？	页面是否繁忙，用户是否可以与页面进行交互？
是否令人愉快？	交互是否流畅自然，没有延迟和卡顿？

性能指标的分类

真实指标、实验室指标、用户感知指标 、自定义指标

• 在实验室中：使用工具在稳定、受控的环境中模拟页面加载

• 在实际情况中：基于真实用户的实际页面加载与页面交互

  虽然实验室指标可以对前端性能进行一个比较合理的评价，但是这不能反映所有用户在实际情况下对前端界面的使用。比如我在微信开发工具中使用不同的模拟机去模拟，但是也是无法覆盖所有手机的真实情况，比如有的手机是曲面屏，字体设置大小可能也不一样，而且我所测试的模拟机的网络状态也可能跟多数用户的网络状态不一样。也就是这种用户的设备，个性化或者状态的不确定性，所以我们不能只使用实验室的指标进行评价。

  如果想要真实的了解前端界面的性能，还是得进行实测，也就是利用真实指标来评价前端界面（RUM)。除此之外，其实还有用户感知指标（主要在加载速度、响应速度、平滑度的感知方面）

  自定义指标：

  • 用户计时 API
  • 长任务 API
  • 元素计时 API
  • 导航计时API
  • 资源计时 API
  • 服务器计时

💡 简述：

指标的话可以分为四种，实验室指标，真实指标，用户感知指标和自定义指标。
实验室指标主要有可交互时间TTI和总阻塞时间TBT。

• 可交互时间 TTI 度量从页面开始加载到主要的子资源加载完成并且能够快速可靠地响应用户交互的时间；
• 总阻塞时间TBT：测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应

真实指标主要有首次内容绘制时间FCP，最大内容绘制时间LCP，累积布局偏移时间CLS，首次输入延迟时间FID，其中前三个为实验室和真实均可用。

• 首次内容绘制FCP指的是页面加载过程中出现第一个元素的时间（部分渲染）；
• 最大内容绘制LCP指的时页面加载过程中，主要内容已经全部加载的时间（主要内容全部渲染，比如图像，视频【使用封面图片的】，文本节点或者其他内联元素或者块级元素）；
• 累积布局偏移 (CLS)度量的是在页面的整个生命周期中每一次意外布局移位的总和。
• 首次输入延迟 (FID)是指用户从第一次与页面交互到前端界面真正能够开始处理时间处理程序以响应交互的时间。（仅仅是事件处理的延迟！！！）

用户感知指标主要是指用户的感知的速度，视觉稳定性，平滑度。

自定义指标我了解到的主要是通过一些API来实现，比如服务器计时API，资源计时API等。

评估工具——谷歌开发工具，Lighthouse，PageSpeed Insights，web pagetest，Pingdom

实验室指标

• 可交互时间 TTI 度量从页面开始加载到主要的子资源加载完成并且能够快速可靠地响应用户交互的时间。
  • Time to Interactive 可交互时间 (TTI)：测量页面从开始加载到视觉上完成渲染、初始脚本（如果有的话）完成加载，并能够快速、可靠地响应用户输入所需的时间。（实验室）
  • 尽量减少 FCP 和 TTI 之间的差异。在某些情况下，确实存在明显的差异，可以通过加载动画告知用户页面还不具备交互性。
• Total blocking time 总阻塞时间 (TBT)：测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。（实验室）

真实指标

• 首次内容绘制FCP指的是页面加载过程中出现第一个元素的时间（部分渲染），是用于度量感知加载速度（用户肉眼可观察）的重要指标。它标记了页面加载时间轴上的第一个点，在这个时间点用户可以看到页面出现了具体内容。

  • 示例：First contentful paint 首次内容绘制 (FCP)：测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。（实验室、实际）
    

  • 代码实现

    import {getFCP} from 'web-vitals';
    
    // Measure and log FCP as soon as it's available.
    getFCP(console.log);
    

• 最大内容绘制LCP指的时页面加载过程中，主要内容已经全部加载的时间（主要内容全部渲染），是用于度量感知加载速度（用户肉眼可观察）的重要指标。它标记了页面加载时间轴上的一个点，在这个时间点页面的主要内容已经加载（比如图像，视频【使用封面图片的】，文本节点或者其他内联元素或者块级元素）。控制在 2.5s 的范围内

  • 示例：Largest contentful paint 最大内容绘制 (LCP)：测量页面从开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。（实验室、实际）
    

  • 代码实现

    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        console.log('LCP candidate:', entry.startTime, entry);
      }
    }).observe({type: 'largest-contentful-paint', buffered: true});
    

• 累积布局偏移 (CLS)度量的是在页面的整个生命周期中每一次意外布局移位的总和。

  • 示例：Cumulative layout shift 累积布局偏移 (CLS)：测量页面在开始加载和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。（实验室、实际）
    

  • 代码

    layout shift score = impact fraction * distance fraction

    impact fraction 表示不稳定元素对两帧间视口区域的影响。

    let cls = 0;
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
          cls += entry.value;
          console.log('Current CLS value:', cls, entry);
        }
      }
    }).observe({type: 'layout-shift', buffered: true});
    

• 首次输入延迟 (FID)是指用户从第一次与页面交互到前端界面真正能够开始处理时间处理程序以响应交互的时间。（仅仅是事件处理的延迟！！！）

  • 一般 input 延迟是因为浏览器主线程繁忙不能及时响应用户，最通常的原因就是浏览器忙于处理和执行大的 JavaScript 文件。

  • FID 度量的仅仅是事件处理的延迟，它不会考虑事件处理时间本身和浏览器在执行事件处理程序之后更新页面 UI 的时间。

  • 示例：First input delay 首次输入延迟 (FID)：测量从用户第一次与您的网站交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器实际能够对交互做出响应所经过的时间。（实际）

  • 代码

    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        const delay = entry.processingStart - entry.startTime;
        console.log('FID candidate:', delay, entry);
      }
    }).observe({type: 'first-input', buffered: true});
    

用户感知指标

• Perceived load speed 感知加载速度：页面在屏幕上加载并渲染出所有视觉元素的速度。
• Load responsiveness 加载响应度：为了使组件对用户交互作出快速响应，页面加载和执行任何所需 JavaScript 代码的速度。
• Runtime responsiveness 运行时响应度：页面在加载后，对用户交互的响应速度。
• Visual stability 视觉稳定性：页面上的元素是否会出现让用户感到意外的偏移，并对用户交互造成潜在的干扰？
• Smoothness 平滑度：过渡和动画在页面状态切换的过程中是否具有稳定的帧速率和顺滑的流动性？

评估工具

谷歌开发工具，Lighthouse，PageSpeed Insights，web pagetest，Pingdom…

• 谷歌开发者工具Chrome DevTools，是谷歌浏览器自带的一个web编写和调试工具。
• Lighthouse是一个开源的自动化工具，用于改进网络应用的质量。 你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。适用于网页版和移动端。能生成一个包括页面性能、PWA（Progressive Web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO 的报告清单提供参考。
• PageSpeed Insights 谷歌开发的一个免费的网页分析工具，在地址栏中输入被分析的网站 url 地址，点击分析。
• web pagetest 一个在线性能评测网站， 它是一个非常详细且专业的web页面性能分析工具，而且开源的！支持IE，Chrome，使用真正的浏览器(IE和Chrome)和真实的消费者连接速度，从全球多个地点运行免费网站速度测试。WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四个功能。
• Pingdom 可测试页面加载速度，分析并找出性能瓶颈。帮助用户找出影响网站速度的原因，并给出改善网页性能的可行性方案，很适合做网站的用户。