浏览器渲染过程

在讲 composeblend 之前,我想先介绍一下浏览器整个的渲染过程。
浏览器在渲染页面的时候,大概会走几个步骤:layout,repaint,compose

layout 过程中要做的事就是计算元素的位置和尺寸,所以我们在改变一个元素尺寸,或者 overflowposition 等属性的时候就会触发页面的重新布局,有人也把这叫做 reflow(回流)。所以我们在很多讲前端动画的文章中,都说要尽量避免页面回流。

repaint 这个步骤就好理解了,这一步就是给元素上色。更改元素的 colorbackground-color 等属性都会导致 repaint

compose 这一步是渲染的最后一步,他的作用是将不同的图层合在一起。和其它步骤有所不同的是,这一步有时会有 GPU 的参与,比如 canvasvideo 等元素都是由 GPU 进行 compose 操作的。

Compose 合成

compose 的功能就是将两张图合成一张图,下面的图例中 destination 就是背景, source 就是前景,他们之间叠加的部分叫做 backdrop

clipboard.png

compose 的操作大概有下面几种

clear

前景和背景都不显示

clipboard.png

copy

只会显示前景

clipboard.png

destination

只会显示背景

clipboard.png

source over

前景在背景之上,也是我们最常用的方式。

clipboard.png

destination over

背景在前景之上

clipboard.png

source in

只显示重叠区域中前景的部分

clipboard.png

destination in

只显示重叠区域中背景的部分,有点类似 svg 中的 clip-path

clipboard.png

source out

将重叠的区域从前景移除

clipboard.png

destination out

将重叠的区域从背景移除

clipboard.png

source atop

将重叠区域替换为前景

clipboard.png

destination atop

将重叠区域替换为背景

clipboard.png

XOR

去除重叠的区域

clipboard.png

参考:


时允
4.9k 声望112 粉丝

美团成都部门招聘 RD,有意者联系我