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
共有 24 条评论
这两天发现大家对CSS的渲染和性能都比较感兴趣^^
aoao好久没更新了，终于又看见你的东西了。
其实这让我想起了Mozilla推荐的CSS书写顺序，貌似和他渲染的过程及其的相似。
有意思.
ft，刚看完视频就在你这边也转载了，动作蛮快哈。
———————————————
“这篇文章发表于2008年5月29日 上午 12:50，……”
你文章发表的时间蛮有意思哈。
那么，如果CSS里定义的宽高（尤其是高度）计算有误的话，浏览器需要自行计算，是不是也增加了这一步的开销？
很酷，要有个什么工具或者ff的addon可以做这个就好了
是从文档结构从上到下一步一步渲染,还是按CSS的书写顺序?
不过好像和css性能有关的都只有Mozilla在提。而和js性能有关的yahoo做的最多。
前一阵子一直在找一个能详细测试页面加载顺序的方法，要是有这样的工具，那 那 那~~ 就帅呆了。
@怿飞 人家不是乱写的。。
@秦歌 已经改好了。T_T
@流放之忆 @MarVell 我也不是很清楚
aoao 这也太强了吧
参观下
看上去很有意思嘛~~
这个东东演示的是浏览器在渲染一个页面时的工作过程?
呵呵，有人找到这个工具吗？ ^_^
@MarVell 你意思是CSS的书写顺序对文档渲染有影响啊？
请aoao提供相关的更多滴资料……视频好感性耶~~
确实有点帅！
这个是什么工具呢，能不能介绍下，我也想拿来测试-。-
完全不懂,怎么才能看到这效果.
作者并不是用独立的工具完成的。
先后用了 Ruby 脚本、Ruby/SDL、GIMP、TmpGenc 等语言和工具来“一帧一帧”完成的。
换句话说，作者是先逐帧输出了 bmp 图然后合并成视频的。
咦！同时看到怿飞和秦歌哦～呵呵！很神奇的东东挺好玩～
所以说学习前端就是学习艺术,哈哈
Trackbacks/Pingbacks