形象化的reflow

reflow是个神奇的东西，之前Realazy说到过这个reflow，我摘出其中的重点：

在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。 mozilla通过一个叫frame的对象对盒子进行操作。frame主要的动作有三个：

• 构造frame, 以建立对象树（DOM树）

• reflow, 以确定对象位置，或者是调用mozilla的Layout（这里是指源码的实现）

• 绘制，以便对象能显示在屏幕上

总的来说，reflow就是载入内容树（在HTML中就是DOM树）和创建或更新frame结构的响应的一种过程。

现在，我们能形象地看到这个reflow是怎样的一个过程了（via:What is a reflow?），先看一下Mozilla的首页；

阅读器看不到点这里看。

如果能了解渲染过程的话，自然就可以控制减少网页的开销，不过我还不知道这是怎样搞出来滴，谁知道跟我说一下。这里还有 * 首页和跟google.co.jp的首页的。

阅读器里看不到点这里看

阅读器看不到点这里看

扩展阅读：Notes on HTML Reflow