标签：out bsp 可见 操作dom 队列 code ror 加速 之一
Flow Based Layout）HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
<body> <div class="error"> <h4>我的组件</h4> <p><strong>错误：</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body>
在上面的HTML片段中，对该段落p标签回流将会引发强烈的回流，因为它是一个子节点。这也导致了祖先的回流。此外，<h5>和<ol>也会有简单的回流，因为其在DOM中的回流元素之后。大部分的回流将导致页面的重新渲染。
回流必定会发生重绘，重绘不一定会引发回流。
应该避免频繁使用以下属性，它们都会强制渲染刷新队列。
1.CSS
2.JavaScript
避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
参考文章：https://github.com/sisterAn/blog/issues/33
标签：out bsp 可见 操作dom 队列 code ror 加速 之一
原文地址：https://www.cnblogs.com/cathy1024/p/11378753.html
