发现呈现性能方面的问题

Sofia Emelianova

Kayce Basques

参考呈现标签页上与性能相关的选项，发现呈现性能问题。

使用闪烁突出显示已重新绘制的区域

开启此选项后，Chrome 会在每次发生重新绘制时让屏幕闪烁绿色。

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

1. 打开此演示中的 Rendering 标签页，然后选中 Paint flashing（渲染闪烁）。
2. 观察以绿色突出显示的重绘。

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

突出显示布局偏移区域

布局偏移会导致意外的重绘，而且不仅令人厌烦，而且会造成危害。

一个抓屏，说明了布局不稳定会对用户产生怎样的负面影响。

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

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

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

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

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

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

1. 打开 Rendering 标签页，然后勾选 Layer Borders。
2. 观察橙色和橄榄色的图层边界，以及青色的图块。

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

实时查看每秒帧数以及帧渲染统计信息

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

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

1. 打开 Rendering 标签页，然后选中 Frame render stats 复选框。
2. 查看页面右上角的统计信息。

帧渲染统计信息叠加层显示：

• 网页加载时实时估算的每秒帧数。
• 将时间轴呈现为包含以下三种帧类型的图表：
  • 成功渲染的帧（蓝线）
  • 部分呈现的帧（黄线）
  • 丢帧数（红线）。
• GPU 光栅化的状态：开启或关闭。如需了解详情，请参阅如何进行 GPU 光栅化。
• GPU 内存用量：已使用的数量和最大内存 MB。

识别滚动性能问题

使用滚动性能问题找出包含与滚动相关的事件监听器（可能会影响网页性能）的网页元素。

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

1. 打开 Rendering 标签页，然后勾选 Scrolling Performance Issues（滚动性能问题）。
2. 观察突出显示的潜在问题元素。

查看 Core Web Vitals

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

核心网页指标是适用于所有网页的一部分网页指标。每个 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 扩展程序查看网页的 Core Web Vitals 值。