最大限度的减小浏览器的从新布局（Reflow&Repaint）

减小浏览器从新布局是优化web性能的一个重要手段。这是由于从新布局是浏览器在请求网络资源后所作的一个必要的工做，这也是浏览器渲染web页面的重要机制（详情可参考浏览器的运行原理）。在浏览器得到新的资源后，它会从新计算文档中个元素的位置和形状，以便刷新web页面（能够是部份内容，也能够是所有），这个过程就是从新布局,有的人把这个过程称为web页面的重绘。

可是在从新布局的过程当中，浏览器会阻止用户在浏览器中的其它操做，那么很显然，了解从新布局对于提高web应用的性能很重要，尤为是它能够显著的提高用户的体验效果。固然除了了解从新布局外，咱们还须要了解各类文档属性对浏览器从新布局的影响因素，如：DOM深度、CSS规则，以及样式的改变等。

有的时候，对HTML文档中的单个元素进行从新布局可能会影响到它的父级元素，或者它的兄弟元素，以及它的子元素的从新布局。

触发浏览器从新布局的因素

1. 用户操做

• 页面的初始化加载
• 调整浏览器窗口的大小

1. HTML文档修改

• 使用js修改样式而引发的计算，如：margin: 0 auto;
• 在DOM中添加或移除元素
• 修改某个元素的类（class & id）

那么，有没有一个规范能够缩短页面进行从新布局的呢？答案是确定的。

减小浏览器从新布局的规范

1. 减小没必要要的 DOM 深度。在 DOM 树中的一个级别进行修改可能会导致该树的全部级别（上至根节点，下至所修改节点的子级）都随之变化。这会致使花费更多的时间来执行重排。
2. 尽量减小 CSS 规则的数量，并移除未使用的 CSS 规则。
3. 若是你想进行复杂的渲染修改（如：动画），请在浏览器从新布局流程外执行此操做。你能够使用 position-absolute 或 position-fixed 来实现此目的。
4. 避免使用没必要要且复杂的 CSS 选择器，尤为是后代选择器，由于此类选择器会消耗更多的 CPU 处理能力来执行选择器匹配。

具体的开发中要注意的地方可参考下面两篇文章，它们会告诉你如何书写css会有效减小浏览器从新布局。

参考资料

前端性能优化：细说浏览器渲染的重排与重绘

回流 & 重绘：CSS性能让你的JAVASCRIPT慢了吗？