了解及优化页面回流和重绘

题记：web开发经常会听到回流和重绘这两个词，最近看了一些文档，简单记录下自己对这两个概念的理解以及怎么尽可能避免回流和重绘，提高页面渲染速度。

概念

• 回流
  浏览器的渲染过程中，计算DOM节点在视口内的显示/隐藏，确切位置和大小，这个计算的阶段就是回流。

• 重绘
  是一个元素外观的改变(自身的宽高，布局，及显示或隐藏没有改变)所触发的浏览器行为，例如改变vidibility、background-color等属性。浏览器会根据元素的新属性重新绘制，这个阶段就是重绘。

• 根据两个的概念我们可以得出：

回流必定触发重绘，而重绘不一定触发回流

优化回流和重绘

• 减少回流和重绘的次数

<style type="text/css">
     .change { width: 10px; height: 10px; }
</style>
<script type="text/javascript">
     $(document).ready(function () {
         var el = $('#id');
         //1
         el.css('width', '10px');
         el.css('height', '10px'