【Web渲染性能优化】渲染管道

来源：互联网发布：hive处理数据倾斜编辑：程序博客网时间：2024/05/19 14:51

现如今很多移动设备的屏幕刷新频率达到60fps（60次/每秒），为了使用户的在浏览Web网页时有非常好的交互体验，浏览器需要满足这些设备的刷新频率。这意味着，每一帧只有16ms（1 / 60 = 16.66ms）的时间可供使用，然而，浏览器在这个时间段内还有处理其他的工作要处理，因此，留给我们前端程序执行每一帧渲染的时间在10ms内，当时间花费超过这个时间范围，那么屏幕上的内容变换非常抖动、不流畅，造成非常糟糕的用户体验。

渲染管道

在优化Web渲染性能之前，需要了解Web渲染管道，也称作像素管道（Pixel Pipeline）。

完整的渲染管道

JavaScript. 主要是处理一些会产生视觉变化的工作，例如 jQuery的动画函数, 向页面中添加DOM 元素. 还包括非JavaScript触发的事件，例如CSS Animations, Transitions, 以及Web动画API。
Style 计算. 对匹配选择器的元素进CSS规则的计算, 例如 .headline or .nav > .nav__item. 一旦规则建立，应用该规则的元素都需要计算。
Layout. 浏览器根据CSS规则计算元素在页面空间上的位置、大小。Web的layout 模型中，一个元素可能影响其他元素, 例如 <body>元素的宽会影响其子元素的宽度，以及整个Tree下端的布局。
Paint. 填充像素的过程。涉及到绘制文本、颜色、图像、边框、阴影等元素的每个视觉部分。这个绘制过程通常会在多个图层（layers）中进行。
Compositing. 页面的各个部分所绘制的图层需要以正确的顺序来绘制到屏幕上，Compositing用于对每个图层进行组合、合成，生成最终的像素。

管线中任何阶段都会引起阻塞，降低fps。

在Paint附近也称作Reasterize，这个过程包括两个任务，
1）创建绘制调用列表
2）填充像素

1. JS / CSS > Style > Layout > Paint > Composite

如果改变“layout”属性, 改变一个元素的几何属性，例如宽度、高度，位置等，浏览器需要检测所有的其他的元素，并且“reflow”整个页面.

2. JS / CSS > Style > Paint > Composite

pixel pipeline without layout

如果只改变“paint only”属性, 例如背景图片、文本颜色、阴影等即不改变网页布局的操作,那么浏览器将跳过布局操作.

3. JS / CSS > Style > Composite

pixel pipeline without layout or paint
如果改变非布局和绘制的属性，浏览器会跳过这两个部分，直接合成图层。

为了提升Web的渲染性能，需要从渲染管道的5个步骤进行优化。

引用
https://developers.google.com/web/fundamentals/performance/rendering/

0 0