经常听师兄或者一些前端前辈说不能用CSS通配符*，CSS选择器不能堆叠超过三层，CSS尽量用类选择器，写HTML少用表，结构要尽量简单——DOM树要小.我可能以前就知道，使用通配符或具有太多级别的CSS选择器可能会降低性能。至于为什么不用表标签，我一直很困惑，所以就跟着说了，但是遇到了Repain和Reflow之后，原来是Ok，希望这篇文章对你有帮助！

1.什么是重涂/回流？

好，让我们从前面的图片开始：浏览器分析大致的工作流程

这张图应该很好理解，可以总结为四个步骤：

1.解析html构建DOM树：渲染引擎开始解析HTML文档，将树中的HTML标签或js生成的标签转换为DOM节点，称为内容树。2.构建渲染树：解析CSS(包括外部CSS文件、样式元素和js生成的样式)，根据CSS选择器计算节点的样式，创建另一个树——渲染树。3.从根节点递归调用布局渲染树：以计算每个元素的大小和位置，并给每个节点应该出现在屏幕上的精确坐标。4.绘制渲染树：遍历渲染树，每个节点将使用UI后端层绘制。

好了，我们可以看到第三步和第四步分别出现了“Repain”和“Reflow”。因此，我们给出如下定义：

DOM结构中的每个元素都有自己的框(模型)，需要浏览器根据各种样式(浏览器的、开发人员的定义等)进行计算。)并将元素放在根据计算结果应该出现的位置。这个过程叫做回流；当各种框的位置、大小和其他属性(如颜色和字体大小)确定后，浏览器会根据这些元素各自的特征绘制这些元素，页面的内容就会出现。这个过程叫做重画。可见这两件事对于浏览器渲染页面非常重要，两者都会影响性能。因此，我们需要知道一些会导致重绘和回流的常见操作，并且应该将其最小化以提高渲染速度。

2.导致重新焊接和回流的一些操作

回流的成本比重涂的成本高得多。DOM树中的每个节点都会有一个回流方法，一个节点的回流可能会导致孩子的回流，甚至是父母和同龄人的回流。在一些高性能电脑上可能不算什么，但如果在手机上发生回流，这个过程是非常痛苦和耗电的。因此，以下操作可能成本很高。

当您添加、删除或修改DOM节点时，会导致回流或重新绘制。当你移动DOM的位置，或者制作一个动画。修改CSS样式时。当您调整窗口大小时(移动端没有这种问题)，或者当您滚动时。当您修改网页的默认字体时。注意：display:none将触发重排，而visibility:hidden将仅触发重画，因为找不到位置变化。3.如何优化？

回流是不可避免的，只能将回流对性能的影响降至最低。提出以下建议：

不要一个一个改变DOM的风格。与其这样，不如预定义css类，然后修改DOM类名：

//写不好：var left=10，top=10El . style . left=left ' px '；el.style.top=top ' px//推荐的写法是El . class name=' the class name '；将DOM脱机并修改它。示例：a使用documentFragment对象在内存中操作DOM。首先把DOM给display:none(一次重画)，然后你可以任意改变它。例如，修改100次，然后显示。将一个DOM节点克隆到内存中，然后根据需要进行更改。换完之后，换成网上的。

不要把DOM节点的属性值放在循环中作为循环中的变量。否则会导致大量读写这个节点的属性。

尽可能修改级别较低的DOM节点。当然，更改层次结构底部的DOM节点可能会导致大面积的回流，但也可能影响较小。

对动画HTML组件使用固定或绝对的位置，因此修改它们的CSS将大大减少回流。

切勿使用表格布局。因为一个小小的改变可能会导致整个桌子重新排列。

了解这些东西对浏览器的原理更有意思？好的，以后我们会更新关于浏览器原理的文章，或者你可以先搜索其他的，因为我觉得了解浏览器的原理真的很重要，可以帮助我们写出性能更好的网站。