掌握 Web 性能：了解像素管道

作为 Web 开发人员，特别是对于我们这些专门从事前端开发的开发人员来说，了解浏览器的工作原理、Web 上的通信协议、Web 可访问性等至关重要。

在这种情况下，我将分享一些需要牢记的事项，以提高我们网站的性能，从而增强用户体验。这是关于像素管道的。

什么是像素管道？

像素管道是一个描述网络浏览器如何将 HTML、CSS 和 JavaScript 转换为屏幕上显示的视觉元素的过程

作为 Web 开发人员，您在工作中应该了解和考虑五个主要领域。这五个区域就是您所拥有的，每个区域都代表屏幕像素管道中的一个关键点：

JavaScript：JavaScript 通常用于处理会导致用户界面发生视觉变化的工作。例如，这可能是 jQuery 的动画函数、对数据集进行排序或向页面添加 DOM 元素

样式计算：这是根据匹配选择器确定哪些 CSS 规则适用于哪些 HTML 元素的过程。例如，.headline 是 CSS 选择器的一个示例，它适用于任何具有包含标题类的 class 属性值的 HTML 元素。

布局：一旦浏览器知道哪些规则适用于某个元素，它就可以开始计算页面的几何形状，例如元素占用了多少空间，以及它们在屏幕上出现的位置。

绘画：绘画是填充像素的过程。它涉及在计算出页面上的布局后绘制文本、颜色、图像、边框、阴影以及元素的每个视觉方面。

复合：由于页面的各个部分可能会绘制到多个图层上，因此需要以正确的顺序将它们应用到屏幕，以便页面按预期呈现。

因此，了解了上述内容，我们就可以了解调整元素大小的动画的资源成本，这将涉及到回到 Layout 过程，然后到 Paint 过程，最后到 Compose 过程。

另一方面，创建涉及更改元素的文本颜色或背景颜色的动画只需要进入 Paint 过程，然后进入 Compose 过程。

提高网站性能和增强用户体验的建议

i) 尽可能避免创建太多动画。
ii) 如果您想要动画，请在制作动画时限制自己的变换和不透明度属性，因为这些属性只需要经过 Compose 过程，这是像素管道的最后一步。例如：当使用悬停伪类对按钮进行动画处理时，最好使用不透明度而不是更改其背景颜色。
iii) 如果我们想要移动一个元素作为动画的一部分，最好使用“will-change”或“transform”属性及其翻译值。

我这篇文章的来源：
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

关于浏览器渲染优化的免费课程，由 Paul Lewis 教授，他是与性能相关的所有领域的专家工程师，也是 Lighthouse 的创建者（Google Lighthouse 是一个用于测量网页质量的开源自动化工具），Lighthouse 是一个工具Chrome 开发工具：
https://www.udacity.com/course/browser-rendering-optimization--ud860

以上是掌握 Web 性能：了解像素管道的详细内容。更多信息请关注PHP中文网其他相关文章！