Recalculate Style（重新计算显示样式）  这个事件会在你对CSS的属性进行修改时发生。在上面的截屏中，你可以看到我两次执行了同一条命令。第一次执行时，浏览器要进行Recalculate Style、Layout以及Paint。在第二次就只剩Recalculate style了。这是什么情况？ 因为这是一个刚刚载入的页面，还处于完全不可见状态，为一个未具style的div设置一个高度会导致该div中内容的布局发生变化 (Layout), 从而导致视觉显示上的变化 (Paint)，最后就刷新了它样式(Recalculate Style)。第二次用同样的值执行相同的命令时，浏览器跳过了Paint和Layout，因为它们根本没有发生变化。注意这里面的顺序：Recalculate Style负责通知后继过程是否需要得到触发调用。 让我们回到空白的页面，然后给出div的宽度、高度和背景色，让它在屏幕上显示出真正的变化：  这次浏览器需要进行两次重绘，但只需要计算一次布局。这是因为在Recalculate Style这一步浏览器发现元素的位置/尺寸并没有发生变化，但背景色变了，所以浏览器跳过了一次布局计算。任何导致显示内容变化的事件都会导致浏览器进行一次重绘。 它经常被称为“Reflows”， 布局事件会使浏览器重新计算页面中个元素的位置。举个例子，假如你让一个图片处于浮动（float）状态，文字就会围绕到它的周围。如果你去除了float，浏览器就不得不对它周围的文字进行重新排版（re-flow）。Paul Irish做了一个非常棒的视频，描述了这种重新排版的情况并说明了如何避免这种情况发生。
 要了解更多幕后发生的事情方面的细节内容，请参见这篇博文. |
