Chrome渲染管道的性能改进

Posted 2021-04-28 谷歌开发者

文 | Google 绘制专家 Chris Harrelson

速度是 Chrome 四大核心原则之一，让网络开发者可以为用户提供更快速、更具吸引力的网络体验。尽管浏览器中的许多组件都对整体速度有影响，渲染管道主要负责确保以每秒 60 帧 (fps) 的速度显示网站，让用户感觉很快，响应很灵敏。

过去几个月来，我们对 Chrome 的渲染管道做出了几项性能改进，使其能够更巧妙地处理所要完成的工作。现在，Chrome 可以更智能地跳过冗余任务，选择最优渲染算法，更好地利用系统硬件，使网站加载更快速，运行更顺畅，并且耗电量更低。

为了以 60fps 的速度显示内容，Chrome 只有 16 毫秒的时间来渲染每帧，这包括执行 javascript、样式、布局、绘制和将最终像素推送到用户屏幕上。在这 16 毫秒的时间预算中，Chrome 占用的越少，网络开发者就有越多的时间来运行脚本、加载内容，从而给用户带来满意的体验。我们最近对渲染管道的改进中有许多侧重于降低每帧的工作负载，而不是简单地提升 Chrome 的原始速度。

例如，当 Chrome 准备将像素绘制到屏幕上时，它必须先识别页面上的哪些元素需要重新绘制，哪些可以从前一帧的缓存中复制。在频繁发生 DOM 更改的高动态页面中，这一性能开销会迅速叠加。为了简化这一任务，Chrome 现在会跟踪为每个元素生成的绘制命令，并可识别视觉上不重叠的子集。如果这些子集当中有一个未作修改，则可直接从缓存中复制整个块，而无需执行任何额外的工作。这一优化最多可将绘制新帧到屏幕上所需的时间缩短 35%。

Chrome 还将像素分组到图块中，从而能够更轻巧、更快速地更新到屏幕上。之前，Chrome 会重新绘制 DOM 更新修改过的任何图块，但只有图块中的大部分区域需要重新绘制时，这种方法才是最佳方法。如果只有少数像素发生更改，则直接从前一帧复制整个图块并更新新像素会更快。现在，Chrome 可以智能地选择重新绘制管道，这样速度更快，最多可将重新绘制图块所需的时间缩短 40%。

在此之前，对屏幕的任何更新（例如输入光标闪烁）都可能需要重新绘制整个图块（左图）。现在，只有少数像素发生更改时，Chrome 可以只重新绘制修改过的区域（右图）。

 除了智能优化工作负载之外，Chrome 现在还可以根据底层硬件，更好地选择如何完成其工作。尽管针对视频和画布元素进行 GPU 加速已有很长一段时间了，但 Chrome 仍在努力更好地利用 GPU 执行更具挑战性的渲染任务。现在，在 android、Mac 和 Windows 上，Chrome 能够更好地利用 GPU 加速来完成复杂的网站内容渲染。这改善了最新 SVG 和 html5 页面的动画性能、输入延迟和滚动流畅性。

衡量速度有许多不同的标准，我们致力于不断提升 Chrome 的性能，使开发者能够实现 60fps 的渲染速度，给用户带来最佳的体验。渲染管道只是众多改进中的一项，我们还准备了许多其他改进。敬请关注，我们将继续深度优化性能，为所有 Chrome 用户稳步提升网络速度和响应灵敏度。

推荐阅读：