03渲染优化-04复合线程与图层

最新推荐文章于 2022-02-07 08:55:00 发布

trust_future99

最新推荐文章于 2022-02-07 08:55:00 发布

阅读量228

点赞数

分类专栏：前端文章标签： css html5 javascript

本文链接：https://blog.csdn.net/trust_future99/article/details/114134469

版权

21 篇文章 1 订阅

订阅专栏

复合线程（compositor thread）就是将页面拆分图层进行绘制后再合并图层

默认情况下，浏览器会根据他自己的规则来进行图层的拆分。

在这里插入图片描述

页面若有动画，图层个数会随着动画的变化而变动
在这里插入图片描述

不影响回流和重绘。

// 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform :translate(<length>[, <length>])

// 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
transform :scale(<number>[, <number>])

// 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
transform :rotate(<angle>)

// 使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
opacity: 0~1

以上4个是对元素的几何形状或者颜色做变换的，把这些元素独立到一个图层，就不会引起回流和重绘，只会做图层复合。

在这里插入图片描述
以淘宝网为例，如上图，选中图层后会在页面上把对应的元素阴影显示；而当前图层是轮播图，使用单独的图层可以避免轮播图变换时不引起其他图层元素的回流和重绘。

在这里插入图片描述
如上图，轮播图在循环播放时，并没有重绘，只是做了更新图层和新的图层合并。

关注