发现呈现性能方面的问题

Sofia Emelianova

Kayce Basques

如需了解呈现性能问题，请参阅呈现标签页上与性能相关的选项的参考文档。

利用颜料闪烁突出显示重新绘制的区域

开启此选项后，每当 Chrome 重绘时，屏幕都会闪烁绿色。

要查看正在重新绘制的区域，请执行以下操作：

1. 打开此演示中的渲染标签，然后查看绘制闪烁。
2. 观察以绿色突出显示的重绘。

如果在其他网页上，您看到整个屏幕闪烁绿色，或看到您认为不应绘制的屏幕区域，不妨考虑进一步调查。

突出显示布局偏移区域

布局偏移会导致意外重绘，不仅会令人烦恼，还会造成损害。

说明布局不稳定如何对用户产生负面影响的抓屏。

如需查看页面上布局偏移的位置和时间，请执行以下操作：

1. 打开 Rendering 标签页，然后勾选 Layout Shift Regions。

2. 请刷新页面。布局偏移的区域会短暂地以紫色突出显示。

查看带有图层边框的图层和功能块

使用图层边框可在页面顶部查看图层边框和图块叠加层。

如需启用图层边框，请执行以下操作：

1. 打开渲染标签页，然后选中图层边界。
2. 观察橙色和橄榄色的图层边框以及青色的图块。

有关颜色编码的说明，请参阅 debug_colors.cc 中的注释。

通过帧渲染统计数据实时查看每秒帧数

帧渲染统计信息是显示在视口右上角的叠加层。

如需打开帧渲染统计信息，请执行以下操作：

1. 打开渲染标签页，然后选中帧渲染统计信息复选框。
2. 查看页面右上角的统计信息。

帧渲染统计信息叠加层会显示以下内容：

• 网页运行时每秒帧数的实时估算值。
• 以图表形式显示的帧时间轴，包含 3 种帧类型：
  • 成功渲染的帧（蓝线）
  • 部分呈现的帧（黄色线条）
  • 丢帧（红线）。
• GPU 光栅的状态：开启或关闭。有关详情，请参阅如何进行 GPU 光栅化。
• GPU 内存用量：已使用的内存数量和内存大小上限 (MB)。

识别滚动性能问题

使用滚动性能问题找出存在与滚动相关的事件监听器（可能会降低网页性能）的网页元素。

如需查看可能存在问题的元素，请执行以下操作：

1. 打开渲染标签页，然后勾选滚动性能问题。
2. 观察突出显示的可能存在问题的元素。

查看 Core Web Vitals

网页指标是 Google 推出的一项计划，旨在针对对于提供出色的网页用户体验至关重要的质量信号提供统一指南。

核心网页指标是适用于所有网页的一部分网页指标。每个核心 Web 指标都代表着用户体验的不同方面，可在现场衡量，并反映以用户为中心的关键成效的真实体验。Core Web Vitals 包括：

• Largest Contentful Paint (LCP)：衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内完成。
• Interaction to Next Paint (INP)：衡量互动性。为了提供良好的用户体验，网页的 INP 应不超过 200 毫秒。
• Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，网页的 CLS 应保持在 0.1 或更低。

使用 Web Vitals Chrome 扩展程序查看网页的核心网页指标值。