如果网站和应用运行不佳，用户会注意到，因此优化呈现性能至关重要！
当今的网络用户都希望他们访问的网页具有互动性， 这就需要您多加投入时间和精力 网页不仅要快速加载，还要快速响应用户输入 它们的整个生命周期内事实上，用户体验的这一方面 这正是“下一次渲染互动的互动”(INP) 指标衡量的。较好 INP 是指网页能始终如一地可靠地响应用户 需求。
使网页看起来简洁的一个主要因素是 您为响应用户互动而执行的 JavaScript， 可以预料的是用户界面的视觉变化。给用户带来视觉变化 是数种工作的成果，通常统称为 并且渲染需要尽快完成 使用户体验感觉快速而可靠。
要编写对用户互动做出快速响应的网页，您需要了解 浏览器如何处理 HTML、JavaScript 和 CSS，并确保 您编写的代码，以及您添加的任何其他第三方代码，都会以 尽可能高效。
关于设备刷新率的说明
目前，大多数设备的屏幕刷新率为每秒 60 次。每次刷新 它会生成您看到的视觉输出，通常称为帧。在 以下视频演示了帧的概念：
虽然设备屏幕始终以一致的频率刷新，但是 在设备上运行时，不一定总能生成足够的帧， 与此刷新频率保持一致。例如，如果有动画或转场 运行时，浏览器需要与设备的刷新率保持一致 都会产生相应的帧数。
鉴于典型的显示屏每秒刷新 60 次， 可以看到，浏览器有 16.66 毫秒的时间来生成每一帧。 但实际上，浏览器在处理每一帧时都有自己的开销 您的工作需要在 10 毫秒内完成。如果您未能 帧数会下降，且网页内容会在屏幕上抖动。这个 这种现象通常称为卡顿。
不过，您的目标会根据您尝试执行的操作类型而变化。 满足 10 毫秒的阈值对于动画至关重要 将屏幕上的对象插入两个帧之间的一系列帧中， 积分。就界面中的离散变化而言， 它从一种状态过渡到另一种状态，而中间不出现任何运动， 建议在感觉即时到响应的时间范围内完成此类更改 用户。在这类情况下，经常提及 100 毫秒， INP 指标的“良好”为 200 毫秒或更短的时间 以适应更多具有不同功能的设备。
无论你的目标是什么，只要制作多帧动画， 避免卡顿， 尽可能快速地浏览用户界面 - 了解浏览器的像素如何 至关重要
像素管道
在使用 AdWords 视频广告计划时，您需要了解并注意五个主要方面。 是一名 Web 开发者这五个方面是您影响最多的几个方面 每个对象都代表像素到屏幕管道中的一个关键点：
- JavaScript：JavaScript 通常用于处理会产生以下结果的工作：
界面的视觉变化例如，这可能是 jQuery 的
animate函数、对数据集进行排序或向页面添加 DOM 元素。 但 JavaScript 并不是触发视觉变化所必需的：CSS 动画、CSS 过渡和 Web Animations API 能够 为网页内容添加动画效果。 - 样式计算：这是计算哪些 CSS 规则
将应用于哪些 HTML 元素。例如：
.headline是适用于任何 HTML 元素的 CSS 选择器示例 的class属性值，其中包含headline类。出发地： 知道规则后，就会应用规则，每个规则的最终样式 元素。 - 布局：浏览器知道哪些规则适用于某个元素后，便可
开始计算页面的几何信息，例如
以及它们在屏幕上的显示位置网页布局模型是指
一个元素可能会影响其他元素。例如，
<body>的宽度 元素通常会一直对其子元素的尺寸产生影响 所以这个过程对于浏览器来说可能相当复杂 - 绘制：绘制是填充像素的过程。包括绘制 对文字、颜色、图片、边框、阴影以及所有视觉元素 计算元素在网页上的布局之后的纵横比。 绘制通常在多个表面（通常称为层）上完成。
- 复合材料：由于页面的各个部分可能被绘制到 因此需要按正确的顺序将它们应用到屏幕上 确保网页按预期呈现对于 因为一个错误可能会导致某个元素出现 错误地叠加在另一个应用上。
像素管道的每一部分都代表一个机会， 使动画出现卡顿现象，或延迟绘制帧，即使对于离散的视觉元素也是如此 更改界面因此，请务必准确了解 代码触发流水线的哪些部分，并调查能否 将您的更改限制在像素管道中， 呈现它们。
您可能听说过“光栅化”一词与“绘制”结合使用。这个 因为绘制实际上涉及两项任务：
- 创建绘制调用列表。
- 填充像素。
后者称为“光栅化”。 您应该将其视为包含光栅化。在某些 绘图调用列表的创建以及光栅化， 但这已不受开发者的控制。
您不一定总是在每一帧上都触及管道的每个部分。 事实上，对于给定的给定数据集，流水线通常会有三种方式 使用 JavaScript、CSS 或 Web Animations API。
1. JS / CSS >样式 >布局 >绘制 >复合材料
如果您更改“布局”属性，例如将元素的
几何图形，例如宽度、高度或其位置（例如 left 或 top CSS）
属性），浏览器需要检查其他所有元素并“自动重排”该
页面。任何受影响的区域都需要重新着色，
这些元素需要重新合成在一起。
2. JS / CSS >样式 >绘制 >复合材料
如果您更改了“只绘制”属性（例如，
属性（如 background-image、color 或 box-shadow）- 布局步骤
则不必对网页提交视觉更新。通过省略布局
尽可能避免高成本的布局工作，
否则会导致在生成下一帧的过程中出现显著的延迟。
3. JS / CSS >样式 >复合材料
如果您更改的属性既不要求也不要求布局和绘制，浏览器 则可以直接跳转到合成步骤这个价格最低， 通过像素管道的理想路径， 页面生命周期，例如动画或滚动。趣味小知识：Chromium 会进行优化 以便只发生在 这意味着即使网页没有响应，您仍然可以 滚动页面并查看其中之前绘制到屏幕上的部分。
提升网页性能是一种避免工作，同时又能提高效率的艺术 尽可能避免任何必要的工作在许多情况下 与浏览器交互，而不是违背它。需要注意的是 计算费用有所不同；一些 任务本身开销都比其他任务更昂贵！
我们来深入了解一下流水线的不同部分。我们将介绍 以及如何诊断和修复这些问题
浏览器渲染优化
性能对用户至关重要，而要打造良好的用户体验，Web 开发者 您就需要构建能够快速响应用户互动和呈现 性能专家 Paul Lewis 将帮助您消除卡顿， 开发能保持每秒 60 帧性能的 Web 应用。您即将离开 本课程中提供了对应用进行性能分析以及确定应用 呈现性能欠佳。您还将了解浏览器的呈现方式 开发流水线并发现模式，以便更轻松地构建快速网站， 让用户乐在其中。