详细解释重画和回流使用Javaｓｃｒｉｐｔ
你经常听前辈或前辈说，有些前端不能用CSS通配符，CSS选择器不能超过三叠层，CSS尽量使用html编写类，使用较少的表，DOM树结构应该尽可能简单…等..这些建议，我大概知道使用通配符或CSS选择器水平可能会降低性能，至于为什么我一直用表格标签迷迷糊糊不，他们跟着做，但当我会见了向往和Reflow，原来真的可以不用太much.ok，我希望这篇文章能帮助你！1。什么是重绘 /回流
好的，先得到一张图片：浏览器解析近似的工作流
这幅画应该有四个步骤很好的理解和总结：
1，解析html以构建DOM树：呈现引擎开始解析HTML文档，将HTML标记从js或JS生成的标记转换为DOM节点，称为内容树。
2，构建呈现树：解析CSS（包括外部CSS文件和样式元素和js生成的样式），计算基于CSS选择器的节点样式，并创建另一棵树——呈现树。
3，布局呈现树：递归地从根节点调用，计算每个元素的大小和位置，并给出每个节点应该出现在屏幕上的精确坐标。
4，渲染渲染树：遍历渲染树，每个节点将使用UI后端层绘制。
好了，我们可以看到，向往和回流出现在第三和第四个步骤，分别。所以我们给出下面的定义：
在DOM结构的每个元素一个盒子（模型），这需要根据不同的类型的浏览器（浏览器、开发者等）计算，根据计算结果会出现在它的位置，这一过程称为回流；当箱的位置、大小和其他属性，如颜色、字体大小在浏览器将这些元素与绘画又根据各自的特点，所以网页的内容出现，这一过程称为重。
因此，这两件事情对浏览器渲染页面非常重要，这将影响性能。因此，我们需要知道一些常见的操作，会导致重绘和回流，我们应该尽量减少渲染速度尽可能。
2。使其和Reflow的一些操作
回流成本的成本比油漆高很多。DOM树中的每个节点有一个回流的方法，和一个节点的回流可能导致子节点，即使父母点，和回流的同级节点。可能会有一些高性能计算机没什么，但如果在手机发生回流，过程是非常痛苦和功率消耗。
因此，下列行动可能是非常昂贵的。
当您添加、删除和修改DOM节点，导致回流或油漆。
当移动DOM位置时，或者制作动画。
当您修改CSS样式时。
当您在调整大小窗口（在移动电话上没有问题），或当它滚动。
当您修改网页的默认字体时。
注：显示：没有触发回流，和可见性：隐藏触发重画因为没有位置的变化。
三.如何优化
回流是不可避免的，只有尽量减少回流对性能的影响，并给出以下建议：
不由一个改变DOM的风格。与其这样，不如事先定义的CSS类，然后修改DOM的类名：
/写得不好
var = 10，
顶部= 10；
el.style.left =左+PX；
el.style.top = +PX；
推荐写作
el.classname =theclassname ；
在DOM脱机之后，修改它：
一>使用documentfragment对象在内存中操作DOM。
B＞首先DOM显示：没有（用油漆），然后你想怎么改变它。例如，修改100次，然后给他。
把一个DOM结点克隆到内存中，然后想改变怎么变，变了以后，和在线换一个交换。
不要将DOM节点属性的值放在循环中作为循环中的变量。否则，这将导致这个节点的大量读写属性。
尽可能地修改较低级别的DOM节点。当然，改变底层的DOM节点可能会引起大面积的回流，但也可能有小的影响。
使用固定或净的位置动态HTML组件，修改CSS将大大减少回流。
不要使用表格布局，因为一个小小的改变可能会导致重新布局整个表。
你知道这些人是否对浏览器的原理更感兴趣好的，稍后会更新关于浏览器原理的文章，或者你可以先搜索别人，因为我认为理解浏览器的原理非常重要，它可以帮助我们写出更好的网站。