CSS高性能动画

最新推荐文章于 2024-09-19 11:25:25 发布

乐橙Web

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量247

点赞数

分类专栏： H5，CSS3 文章标签： css javascript

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/108699313

版权

10 篇文章 0 订阅

订阅专栏

前置知识点

会的，频繁触发重绘与回流，会导致UI频繁渲染，最终导致js变慢。

有两个线程：一个线程JavaScript解析，一个线程是UI渲染，这两个其实是互斥的两个线程。

当javascript 线程运行的时候 ui 线程则会中止暂停，反之亦然。

那这是为什么呢？

原因是，当ui 线程运行对页面进行渲染的时候 js 脚本难免会涉及到页面视图上的一些样式的改变，为了使这个改变更加准确 js 脚本只好等待ui 线程渲染完成的时候才去执行。

所以当一个页面的元素样式改动频繁的时候ui 线程就会持续渲染，造成js 代码反应慢半拍，卡顿的情况。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当页面布局和几何属性改变时就需要回流
触发页面重布局的属性：
- 盒子模型相关属性会触发重布局：width ，height，padding，margin，display，border-width，border，min-heigh。
- 定位属性及浮动也会触发重布局：top，bottom，left，right，position，float，clear
- 改变节点内部文字结构也会触发重布局：text-align，overflow-y，font-weight，overflow，font-family，line-height，vertival-align，white-space，font-size

总结：回流必将引起重绘，而重绘不一定会引起回流
现在我们知道了那些属性会触发回流，那如何避免回流呢？

其实有两个方法：

第一，不使用以上能触发图层回流的属性，

第二，建立一个图层，让回流在这些图层里面进行，限制回流和重绘的范围，减少浏览器的运算工作量

将频繁重绘回流的DOM元素单独作为一个独立图层，那么这个DOM元素的重绘和回流的影响只会在这个图层中。

3D或透视变换（perspective transform）CSS属性
使用加速视频解码的节点
拥有3D（WebGL）上下文或加速的2D上下文的节点
混合插件（如Flash）
对自己的opacity做CSS动画或使用一个动画webkit变换的元素
拥有加速CSS过滤器的元素
元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
如何手动创建图层的两种方法
will-change:transform
transform:translateZ(0)
Chrome浏览器的more tools下面的Layers能查看图层信息，rendering能查看浏览器页面正在重绘的元素。

用图层可以减少重绘和回流，但是图层会有合成的消耗，因此两者之间需要一个balance！