介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

时间 2020-01-20

标签介绍回流 repaint reflow 以及如何进行优化繁體版

原文原文链接

题目描述：

介绍下重绘和回流（Repaint & Reflow），以及如何进行优化javascript

知识点：Repaint & Reflowcss

解题：

思路一：

1. 浏览器渲染机制html

浏览器采用流式布局模型（Flow Based Layout）
浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。
有了RenderTree，咱们就知道了全部节点的样式，而后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
因为浏览器使用流式布局，对Render Tree的计算一般只须要遍历一次就能够完成，但table及其内部元素除外，他们可能须要屡次计算，一般要花3倍于同等元素的时间，这也是为何要避免使用table布局的缘由之一。

2. 重绘前端

因为节点的几何属性发生改变或者因为样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，由于浏览器必须验证DOM树上其余节点元素的可见性。java

3. 回流css3

回流是布局或者几何属性须要改变就称为回流。回流是影响浏览器性能的关键因素，由于其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会致使了其全部子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。浏览器

<body>
<div class="error">
    <h4>个人组件</h4>
    <p><strong>错误：</strong>错误的描述…</p>
    <h5>错误纠正</h5>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
    </ol>
</div>
</body>复制代码

在上面的HTML片断中，对该段落(缓存

标签)回流将会引起强烈的回流，由于它是一个子节点。这也致使了祖先的回流（div.error和body – 视浏览器而定）。此外，ide

和

回流一定会发生重绘，重绘不必定会引起回流。布局

4. 浏览器优化现代浏览器大多都是经过队列机制来批量更新布局，浏览器会把修改操做放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操做，即便没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。

主要包括如下属性或方法：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
width、height
getComputedStyle()
getBoundingClientRect()

因此，咱们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。5. 减小重绘与回流

1.CSS

使用 transform 替代 top
使用 visibility 替换 display: none ，由于前者只会引发重绘，后者会引起回流（改变了布局)
避免使用table布局，可能很小的一个小改动会形成整个 table 的从新布局。
尽量在DOM树的最末端改变class，回流是不可避免的，但能够减小其影响。尽量在DOM树的最末端改变class，能够限制了回流的范围，使其影响尽量少的节点。
避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

<div>
  <a> <span></span> </a>
</div>
<style>
  span {
    color: red;
  }
  div > a > span {
    color: red;
  }
</style>复制代码

对于第一种设置样式的方式来讲，浏览器只须要找到页面中全部的 span 标签而后设置颜色，可是对于第二种设置样式的方式来讲，浏览器首先须要找到全部的 span 标签，而后找到 span 标签上的 a 标签，最后再去找到 div 标签，而后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。因此咱们应该尽量的避免写过于具体的 CSS 选择器，而后对于 HTML 来讲也尽可能少的添加无心义标签，保证层级扁平。

将动画效果应用到position属性为absolute或fixed的元素上，避免影响其余元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度能够选择 requestAnimationFrame，详见探讨 requestAnimationFrame。
避免使用CSS表达式，可能会引起回流。
将频繁重绘或者回流的节点设置为图层，图层可以阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。
CSS3 硬件加速（GPU加速），使用css3硬件加速，可让transform、opacity、filters这些动画不会引发回流重绘。可是对于动画的其它属性，好比background-color这些，仍是会引发回流重绘的，不过它仍是能够提高这些动画的性能。

2.JavaScript

避免频繁操做样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操做DOM，建立一个documentFragment，在它上面应用全部DOM操做，最后再把它添加到文档中。
避免频繁读取会引起回流/重绘的属性，若是确实须要屡次使用，就用一个变量缓存起来。
对具备复杂动画的元素使用绝对定位，使它脱离文档流，不然会引发父元素及后续元素频繁回流。

扩展阅读：

❤️ 看完两件小事

若是你以为这篇文章对你挺有启发，我想请你帮我两个小忙：

把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一块儿进步，一块儿成长！

关注公众号「IT平头哥联盟」，公众号后台回复「资源」免费领取我精心整理的前端进阶资源教程

JS中文网 - 前端进阶资源教程 www.javascriptC.com

一个致力于帮助开发者用代码改变世界为使命的平台，天天均可以在这里找到技术世界的头条内容
![JS中文网 - 前端进阶资源教程，领略前端前沿,关注IT平头哥联盟](https://www.javascriptc.com)