追境的笔记

# 性能分析

衡量性能并寻找加速页面加载的机会

# 指标

  1. First Contentful Paint（第一次内容绘制）
  2. Speed Index (速度指数)
  3. Largest Contentful Paint (最大的内容绘制)
  4. Time to Interactive (可交互时间)
  5. Total Blocking Time (总阻塞时间)
  6. Cumulative Layout Shift (累积布局偏移)
  7. Max Potential First Input Delay(最大潜在首次输入延迟 )

最大内容绘制 (LCP) 测量用户何时认为页面的最大内容可见。LCP 的度量值表示用户启动页面加载和页面呈现其主要内容之间的持续时间。基于真实的网站数据，表现最好的网站在大约 1,220 毫秒内呈现 LCP，因此指标值映射到 99 分。

# 各指标占比重

指标 比重
第一次内容绘制 10%
速度指数 10%
最大的内容绘制 25%
可交互时间 10%
总阻塞时间 30%
累积布局偏移 15%

# First Contentful Paint（第一次内容绘制）

FCP 衡量浏览器在用户导航到您的页面后呈现第一段 DOM 内容所需的时间。页面上的图像、非白色 <canvas> 元素和 SVG 被视为 DOM 内容

# 如何提升

对 FCP 来说特别重要的一个问题是字体加载时间。查看确保在 webfont 加载期间文本保持可见，以了解加快字体加载的方法。

# Speed Index (速度指数)

速度指数衡量页面加载期间内容的视觉显示速度

# 如何提升

  1. 最小化主线程工作 (opens new window)
  2. 减少 JavaScript 执行时间 (opens new window)
  3. 确保文本在 webfont 加载期间保持可见 (opens new window)

# Largest Contentful Paint 最大的内容绘制 (opens new window)

最大内容绘制 (LCP) 指标报告视口内可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。

# 如何提升

参考 https://web.dev/lcp/#largest-contentful-paint-defined

# Time to Interactive (可交互时间)

TTI 衡量一个页面需要多长时间才能完全交互。在以下情况下，页面被认为是完全交互的：

  • 页面显示有用的内容，这是由First Contentful Paint衡量的，
  • 为大多数可见的页面元素注册了事件处理程序，并且该页面在 50 毫秒内响应用户交互。

# 如何提升

一项可以对 TTI 产生特别大影响的改进是推迟或删除不必要的 JavaScript 工作。

# Total Blocking Time (总阻塞时间)

TBT 衡量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间。总和是通过在First Contentful Paint和Time to Interactive之间添加所有长任务的阻塞部分来计算的。任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间量是阻塞部分。例如，如果 Lighthouse 检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。

# 如何提升

https://web.dev/long-tasks-devtools/#what-is-causing-my-long-tasks

  • 不必要的 JavaScript 加载、解析或执行。在 Performance 面板中分析您的代码时，您可能会发现主线程正在执行加载页面并不是真正必要的工作。通过代码拆分 (opens new window)减少 JavaScript 负载、删除未使用的代码 (opens new window)或有效加载第三方 (opens new window) JavaScript应该可以提高您的 TBT 分数。
  • 低效的 JavaScript 语句。例如，在“性能”面板中分析您的代码后，假设您看到一个document.querySelectorAll('a')返回 2000 个节点的调用。重构您的代码以使用仅返回 10 个节点的更具体的选择器应该会提高您的 TBT 分数。

# Cumulative Layout Shift (opens new window) (累积布局偏移)

CLS 是衡量页面整个生命周期内发生的每个意外布局偏移的最大布局偏移分数的度量。

# 如何提升

主要改进 Max Potential FID 的策略与改进 TTI 的策略基本相同。

# Max Potential First Input Delay (opens new window)(最大潜在首次输入延迟 )

FID 测量从用户第一次与页面交互（即当他们单击链接、点击按钮或使用自定义的、由 JavaScript 驱动的控件）到浏览器实际能够开始处理事件处理程序的时间以回应这种互动。

Max Potential FID 衡量您的用户可能遇到的最坏情况的首次输入延迟。首次输入延迟测量从用户第一次与您的网站交互（例如单击按钮）到浏览器实际能够响应该交互的时间。

较长的首次输入延迟通常发生在首次内容绘制 (FCP)和可交互时间 (TTI) 之间，因为页面已呈现其部分内容，但尚未实现可靠的交互。为了说明这是如何发生的，FCP 和 TTI 已添加到时间线中：

# 如何提升

  • 主要改进 Max Potential FID 的策略与改进 TTI 的策略基本相同。请参阅如何提高您的 TTI 分数
  • https://philipwalton.com/articles/idle-until-urgent/

# 推荐资源

# 官方好文

bottom-up 显示哪个方法最耗时 call tree 显示哪些根活动最耗时。 Event log 按记录期间发生的顺序查看活动。

← 前端性能优化 →