从重绘重排到框架渲染

最新推荐文章于 2022-11-14 22:11:28 发布

道甚夷

最新推荐文章于 2022-11-14 22:11:28 发布

阅读量186

点赞数

分类专栏：前端原理

本文链接：https://blog.csdn.net/junjiahuang/article/details/106896686

版权

前端原理专栏收录该内容

77 篇文章 1 订阅

订阅专栏

浏览器的重绘和重排

场景：

1、添加、删除元素(回流+重绘)

2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

3、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)

4、改变浏览器大小(回流+重绘)

5、改变浏览器的字体大小(回流+重绘)

6、改变元素的padding、border、margin(回流+重绘)

7、改变浏览器的字体颜色（只重绘，不回流）

8、改变元素的背景颜色（只重绘，不回流）

定义：

重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。

重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程

添加、删除可见的dom
元素的位置改变
元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
页面渲染初始化
浏览器窗口大小改变 6.设置style属性7.改变文字大小8.添加/删除样式表9.激活伪类，如:hover10.操作class属性
内容的改变，(用户在输入框中写入内容也会)

重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

优化：

一，浏览器本身的优化策略

浏览器会维护一个队列，将所有引起重排和重绘的操作都放在这个队列里，当操作达到一定的数量或者时间间隔时，浏览器会批量执行来优化重排过程。这样可以让多次的重排重绘，变成一次。但是有的特殊 style 属性会使这种优化失效，例如offsetTop，scrollTop，clientTop等属性，这些属性都是要实时返回给用户的几何属性或者布局属性，因此浏览器需要立即执行，触发重排返回正确的值。

二，最小化重排和重绘

避免设置大量的 style 行内样式。修改单个 DOM 节点的多条语句合并成一个语句来执行。

DOM 元素的动画属性最好设置为 absolute 或者 fixed 定位。

三，css 动画和性能处理

减少 js 操作元素的样式，使用修改 class 类名方式修改样式。
开启动画的 GPU 加速，渲染计算交给 GPU 处理。
避免频繁计算样式，可以缓存变量，并且在变量中工作。
可以使用 querySelectorAll() 获取的静态集合替代 getElementByXX() 获取的动态集合。

四，其他一些具体操作：

不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）
用translate替代top改变
用opacity替代visibility（在独立图层下优化重绘）

总结：

减少 DOM 操作，减少 DOM 操作，减少 DOM 操作

那么框架中，是怎样减少dom操作的呢？

react:

当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。
如要避免不必要的子组件的重渲染，
你需要在所有可能的地方使用 PureComponent，
或是手动实现 shouldComponentUpdate 方法。

vue:

Vue在2.0版本引入了vdom。其vdom是基于 snabbdom 库所做的修改。snabbdom是一个开源的vdom库。snabbdom的主要作用就是将传入的JS模拟的DOM结构转换成虚拟的DOM节点。先通过其中的 h函数 将JS模拟的DOM结构转换成虚拟DOM之后，再通过其中的 patch函数 将虚拟DOM转换成真实的DOM渲染到页面中。为了保证页面的最小化渲染，snabbdom引入了 Diff算法 ，通过Diff算法找出前后两个虚拟DOM之间的差异，只更新改变了的DOM节点，而不重新渲染为改变的DOM节点。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。
你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。
Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。