重绘与重排

醉挽清欢

已于 2022-01-21 19:42:34 修改

阅读量396

点赞数

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

于 2022-01-11 20:00:23 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122406985

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

网页生成过程

1.DOM构造
在我们写完代码之后，浏览器首先会接收到我们写的html代码，然后再通过html解析器来讲我们写的代码构建成一个DOM树。（DOM树的最小单位是节点，每一个节点之间都会有一定的关系。例如：如下就是一个DOM树）
在这里插入图片描述

接着，css解析器将会解析css代码来装饰DOM树，这样，我们就会得到一个装饰了样式的DOM树。
2. 布局
完成DOM树后，浏览器将会按照从上而下，从左至右的顺序来读取DOM的各个节点顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。如果我们读取到的节点是属于另一个节点下的子节点时，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。
3.绘制页面
布局完成之后，我们在页面上其实是看不到任何内容的浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。

渲染：

在页面的生命周期中，网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断触发重排reflow和重绘repaint，不管页面发生了重绘还是重排，都会影响性能，尤其是重排，会造成很大的影响。

重排(reflow)：

什么是重排

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重排也叫回流，简单的说就是重新生成布局，重新排列元素。

什么情况下会发生重排

页面初始渲染（无法避免）
添加/删除的元素
改变元素位置，尺寸，字体大小
改变浏览器窗口尺寸
使用伪类
设置 style属性的值
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，
调用getComputedStyle方法，或者IE里的 currentStyle时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

总之，任何页面布局或是元素属性发生变化都会引发

# 重排 ## 重排影响的范围：由于浏览器渲染界面是基于流式布局模型的，所以触发重排时会对周围`DOM`重新排列，影响的范围有两种： - 全局范围：从根节点html开始对整个渲染树进行重新布局。 - 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局 ### 全局范围重排：

<body>
  <div class="reflow">
    <h4>1</h4>
    <h5><strong>2</strong></h5>
    <ol>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>
</body>

当 <h5>节点上发生重排时时，reflow和body也会重新渲染。

局部范围重排：

当我们把一个DOM的大小固定时，然后在DOM内部触发重排，就只会重新渲染该DOM内部的元素，而不会影响此DOM之外。

重绘(Repaints):

什么是重绘

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

触发重绘的条件

vidibility、outline、背景色等属性的改变

影响

消耗很多的时间来解析代码，造成浏览器卡顿

优化

浏览器自身的优化
浏览器会维护一个队列，把所有会引起重排，重绘的操作放入这个队列，等队列中的操作到一定数量或者到了一定时间间隔，浏览器就会flush队列，进行一批处理。
编码人员优化
（1）减少样式的分次改变，最好将所有需要改变的样式集中起来，进行统一改变（例如利用选择器进行一次性改变）。
（2）将读写分开，不要互相穿插
（3）使用定位 fixed 或 absoult，使他们脱离文档流
（4）使用display:none （一次重排重绘）然后修改后再设置一次display（又一次重绘和重排）或是visibility : hidden（只对重绘有影响，不影响重排）
（5）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
（6）如果需要创建多个DOM节点，就通过 documentFragment 创建一个 DOM 碎片再添加到文档中，创建多个DOM进行修改
（7）尽量不要使用进行布局
（8）在进行动画时，使用GPU加速
（9）不要在布局信息改变的时候做查询