减少浏览器重新布局是优化网页性能的重要手段。这是因为重新布局是浏览器在请求网络资源后所做的一项必要工作，也是浏览器渲染网页的重要机制（详见浏览器运行原理）。浏览器获取新资源后，会重新计算文档中每个元素的位置和形状，以刷新网页（可以是部分内容，也可以是全部内容）。这个过程就是重新布局，也有人把这个过程叫做网页的重绘。但是在重新布局的过程中，浏览器会阻止用户在浏览器中进行其他操作，所以很明显，了解重新布局对于提高Web应用程序的性能非常重要，尤其是可以显着改善用户体验。当然，除了了解重新布局，我们还需要了解影响浏览器重新布局各种文档属性的因素，例如：DOM深度、CSS规则、样式变化等。有时，HTML文档中单个元素的重新布局可能会影响其父元素或其兄弟元素及其子元素的重新布局。触发浏览器重新布局的因素用户操作页面初始加载调整浏览器窗口大小HTML文档修改使用js修改样式引起的计算，如：margin:0auto;在DOM中添加或删除元素修改元素类(class&id)那么，有没有一种规范可以缩短页面重新布局呢？答案是肯定的。一种减少浏览器重新布局以减少不必要的DOM深度的规范。DOM树中某一层的修改可能会导致树的所有层发生变化（上至根节点，下至被修改节点的子节点）。这会导致花费更多时间执行回流。尽可能减少CSS规则的数量，并删除未使用的CSS规则。如果您想进行复杂的渲染修改，例如动画，请在浏览器的重新布局过程之外执行此操作。您可以使用position-absolute或position-fixed来实现这一点。避免不必要和复杂的CSS选择器，尤其是后代选择器，因为它们会消耗更多的CPU处理能力来执行选择器匹配。具体的开发要点可以参考下面两篇文章，里面会告诉你如何写css来有效减少浏览器重新布局。参考资料前端性能优化：详解浏览器渲染的回流和重绘Reflow&redrawing:IsCSSperformanceloweryourJAVASCRIPT?
