最大限度的减少浏览器的重新布局（Reflow&Repai
2018-12-02 本文已影响1人
缘自世界
减少浏览器重新布局是优化web性能的一个重要手段。这是因为重新布局是浏览器在请求网络资源后所做的一个必要的工作，这也是浏览器渲染web页面的重要机制（详情可参考浏览器的运行原理）。在浏览器获得新的资源后，它会重新计算文档中个元素的位置和形状，以便刷新web页面（可以是部分内容，也可以是全部），这个过程就是重新布局,有的人把这个过程称为web页面的重绘。
但是在重新布局的过程中，浏览器会阻止用户在浏览器中的其它操作，那么很显然，了解重新布局对于提升web应用的性能很重要，尤其是它可以显著的提升用户的体验效果。当然除了了解重新布局外，我们还需要了解各种文档属性对浏览器重新布局的影响因素，如：DOM深度、CSS规则，以及样式的改变等。
有的时候，对HTML文档中的单个元素进行重新布局可能会影响到它的父级元素，或者它的兄弟元素，以及它的子元素的重新布局。
触发浏览器重新布局的因素
- 用户操作
- 页面的初始化加载
- 调整浏览器窗口的大小
- HTML文档修改
- 使用js修改样式而引起的计算，如：
margin: 0 auto; - 在DOM中添加或移除元素
- 修改某个元素的类（class & id）
那么，有没有一个规范可以缩短页面进行重新布局的呢？答案是肯定的。
减少浏览器重新布局的规范
- 减少不必要的 DOM 深度。在 DOM 树中的一个级别进行修改可能会致使该树的所有级别（上至根节点，下至所修改节点的子级）都随之变化。这会导致花费更多的时间来执行重排。
- 尽可能减少 CSS 规则的数量，并移除未使用的 CSS 规则。
- 如果你想进行复杂的渲染修改（如：动画），请在浏览器重新布局流程外执行此操作。你可以使用 position-absolute 或 position-fixed 来实现此目的。
- 避免使用不必要且复杂的 CSS 选择器，尤其是后代选择器，因为此类选择器会消耗更多的 CPU 处理能力来执行选择器匹配。
具体的开发中要注意的地方可参考下面两篇文章，它们会告诉你如何书写css会有效减少浏览器重新布局。
