性能 FCP

性能

作者: shaokang 时间: July 17, 2023字数：4099

performance

指标：

  • First Contentful Paint (FCP): 测量用户导航到您的页面后浏览器呈现第一段 DOM 内容所花费的时间。
  • LCP(Largest Contentful Paint): 在视窗内可见的最大图像或文本块的渲染时间;
  • TTI(Time to Interactive): 测量页面变为完全可交互所花费的时间。
  • TBT(Total Blocking Time): 度量阻止页面响应用户输入（例如鼠标单击，屏幕敲击或键盘按压）的总时间。该指标是 First Contentful Paint 和 Time to Interactive 总和;
  • CLS(Cumulative Layout Shift): 测量在页面的整个生命周期中发生的每个意外布局移位的得分的总和

Chrome Performance 工具分析 https://developer.chrome.com/docs/devtools/performance/

性能检测方案

监控系统分类

前端性能监控系统大致为分两类，Synthetic VS RUM（real-user monitoring）

  • Synthetic
    依托于虚拟机，仿真的环境，有固定可控的外在条件，比如固定的网速。
  • RUM
    业务项目中埋入统计代码，在海量用户的真实环境中进行监控，便于在性能超过预期时报警

相关工具

（一）Synthetic

PageSpeed

PageSpeed 能够针对移动设备和桌面设备生成网页的实际性能报告，并能够提供关于如何改进相应网页的建议。PageSpeed 整合了 LightHouse。PageSpeed Insights 还整合 Chrome 用户体验报告 (CrUX) 中的数据（为 PageSpeed 提供了方法论和统计维度），以显示网页的实际性能数据。PSI 会报告两项指标，即首次内容绘制 (FCP) 和文档内容加载 (DCL)。

PageSpeed Insights 会评估相应网页对常用的性能优化最佳做法的遵循情况，并计算出一个得分（分值介于 0 到 100 之间）来估算相应网页的性能优化空间。它评估的是相应网页是否可以从以下两个方面提升性能：

  • 首屏加载时间：从用户请求打开新网页到浏览器呈现出首屏内容所用的时间。
  • 完整网页加载时间：从用户请求打开新网页到浏览器完全呈现出相应网页所用的时间。

LightHouse

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

提供 Chrome 扩展程序插件和 npm 包命令行工具。

WebPageTest

WebPageTest 是一款网页前端性能测试工具，工作原理是输入需统计的 url 并且选择运行次 url 的浏览器版本，webpageTest 后台虚拟机对 url 进行请求分析后便可以给出各种性能指标，比如瀑布流、静态文件数量、首屏渲染时间等等。

使用方式

  • 在线使用：https://www.webpagetest.org/
  • 基于 WebPageTest 搭建性能监控平台：https://github.com/WPO-Foundation/webpagetest-docs/blob/master/user/Private%20Instances/README.md

sitespeed.io

github： https://github.com/sitespeedio/sitespeed.io

简单可以拓展 Web 化自有的指标、支持多平台模拟，也可以在真机上进行测试，其提供的视频录制和视频指标采集等功能也能够清晰的体现用户的真实体验情况。可以搭建 docker 环境。

（二）RUM 项目中埋入统计代码。Google Analytic、百度统计

工具对比

https://web.dev/speed-tools/

如何衡量一个站点的性能好坏

https://mp.weixin.qq.com/s/NBWEHTe-w0DbrtYl2HyXlw

资料

http://www.alloyteam.com/2020/01/14184/

RAIL 模型

RAIL 是一个以用户为中心的性能模型，包括了：

  • Response（响应）：在 50 毫秒内对用户输入做出响应，以确保应用对用户的交互具有即时感。响应时间超过 50 毫秒，用户可能会感觉到明显的延迟。
  • Animation（动画）：在 10 毫秒内生成每一帧的动画，以使动画流畅且具有连贯性。动画帧率低于每秒 60 帧，用户可能会感觉到动画卡顿或不流畅。
  • Idle（空闲）：利用空闲时间执行非关键任务，以提高整体性能。在用户不活动时，可以利用空闲时间完成一些延迟执行的任务，如预加载资源、预渲染页面等。
  • Load（加载）：在 5 秒内完成页面的内容加载，以便用户能够快速访问页面并进行交互。页面加载时间超过 5 秒，用户可能会感到不耐烦并离开页面。 RAIL 模型的目标是为了提供一种可衡量的指标，帮助开发者评估和优化 Web 应用的性能。通过关注这四个方面，开发者可以在关键的性能指标上进行优化，以提供更好的用户体验。

性能指标及计算方式

Navigation Timing 提供了可用于衡量一个网站性能的数据.

  • Redirect：redirectEnd - redirectStart
    计算条件：redirectEnd 非 0 且 redirectStart 非 0
  • DNS：domainLookupEnd - domainLookupStart
    计算条件：domainLookupEnd 非 0 且 domainLookupStart 非 0
  • TCP：connectEnd - connectStart
    计算条件：connectEnd 非 0 且 connectStart 非 0
  • SSL：connectEnd - secureConnectionStart
    计算条件：connectEnd 非 0 且 secureConnectionStart 非 0
  • Request：responseStart - requestStart
    计算条件：responseStart 非 0 且 requestStart 非 0
  • Response：responseEnd - responseStart
    计算条件：responseEnd 非 0 且 responseStart 非 0
  • Load：loadEventEnd - navigationStart
    计算条件：loadEventEnd 非 0 且 navigationStart 非 0 页面完全加载总时间，是指从 NavigationStart 事件开始到
  • LoadEventEnd 事件结束的时间
  • DomReady：domContentLoaded - fetchStart
    计算条件：domContentLoaded 非 0 且 fetchStart 非 0
  • DomParse：domInteractive-responseEnd
    计算条件：domInteractive 非 0 且 responseEnd 非 0
  • Processing：domComplete - domLoading
    计算条件：domComplete 非 0 且 domLoading 非 0
  • resourceLoad：loadEventStart-domContentLoaded
    计算条件：loadEventStart 非 0 且 domContentLoaded 非 0
  • TTFB：responseStart - navigationStart

参考资料

  • https://www.w3.org/TR/navigation-timing/
  • https://www.w3.org/TR/navigation-timing-2/
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API
  • https://www.volcengine.com/docs/6431/107445

FP、FCP、LCP

FP 和 FCP 通过 performance.getEntriesByType(‘paint’) 或者 PerformanceObserver 方法获取 demo

TTI (可交互时间)

TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时，满足以下 3 个条件：

  • 页面已经显示有用内容。
  • 页面上的可见元素关联的事件响应函数已经完成注册。
  • 事件响应函数可以在事件发生后的 50ms 内开始执行。

如何获取：

  1. 从起始点（一般选择 FCP 或 FMP）时间开始，向前搜索一个不小于 5s 的静默窗口期。静默窗口期：窗口所对应的时间内没有 Long Task，且进行中的网络请求数不超过 2 个。
  2. 找到静默窗口期后，从静默窗口期向后搜索到最近的一个 Long Task，Long Task 的结束时间即为 TTI。
  3. 如果没有找到 Long Task，以起始点时间作为 TTI。
  4. 如果 2、3 步骤得到的 TTI < DOMContentLoadedEventEnd，以 DOMContentLoadedEventEnd 作为 TTI。

FMP

FMP（First Meaningful Paint），即首次绘制有意义内容的时间

FMP 指标利用 MutationObserver API 获取

web-vitals 库

web-vitals 库提供了用于收集 Web Vitals 指标的 JavaScript 库。

CATALOG
    FEATURED TAGS
    babel 复习 Node React 工程化 读书笔记 react
    FRIENDS