形象化的reflow

Posted on 2008-05-29 by aoao

Mozilla首页的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

This entry was posted in Web开发 and tagged , . Bookmark the permalink.

28 Responses to 形象化的reflow

  1. 怿飞 @ 2008-05-29 at 09:17

    这两天发现大家对CSS的渲染和性能都比较感兴趣^^

    回复
  2. smoke520 @ 2008-05-29 at 09:19

    aoao好久没更新了，终于又看见你的东西了。

    回复
  3. 怿飞 @ 2008-05-29 at 09:21

    其实这让我想起了Mozilla推荐的CSS书写顺序，貌似和他渲染的过程及其的相似。

    回复
  4. 正淳 @ 2008-05-29 at 09:24

    有意思.

    回复
  5. 秦歌 @ 2008-05-29 at 09:42

    ft，刚看完视频就在你这边也转载了，动作蛮快哈。
    ———————————————
    “这篇文章发表于2008年5月29日 上午 12:50，……”
    你文章发表的时间蛮有意思哈。

    回复
  6. 流放之忆 @ 2008-05-29 at 09:45

    那么，如果CSS里定义的宽高（尤其是高度）计算有误的话，浏览器需要自行计算，是不是也增加了这一步的开销？

    回复
  7. uiL @ 2008-05-29 at 10:33

    很酷，要有个什么工具或者ff的addon可以做这个就好了

    回复
  8. MarVell @ 2008-05-29 at 14:08

    是从文档结构从上到下一步一步渲染,还是按CSS的书写顺序?

    回复
  9. Robin @ 2008-05-29 at 14:21

    不过好像和css性能有关的都只有Mozilla在提。而和js性能有关的yahoo做的最多。

    回复
  10. Robin @ 2008-05-29 at 14:27

    前一阵子一直在找一个能详细测试页面加载顺序的方法，要是有这样的工具，那 那 那~~ 就帅呆了。

    回复
  11. aoao @ 2008-05-29 at 15:14

    @怿飞 人家不是乱写的。。

    @秦歌 已经改好了。T_T

    @流放之忆 @MarVell 我也不是很清楚

    回复
  12. winter @ 2008-05-30 at 13:19

    aoao 这也太强了吧

    回复
  13. llinzzi @ 2008-05-30 at 17:25

    参观下

    回复
  14. 锐风 @ 2008-06-01 at 10:10

    看上去很有意思嘛~~

    这个东东演示的是浏览器在渲染一个页面时的工作过程?

    回复
  15. dh20156 @ 2008-06-05 at 13:47

    呵呵，有人找到这个工具吗？ ^_^

    回复
  16. Amer @ 2008-06-09 at 11:18

    @MarVell 你意思是CSS的书写顺序对文档渲染有影响啊？

    请aoao提供相关的更多滴资料……视频好感性耶~~

    回复
  17. 飘零雾雨 @ 2008-07-02 at 17:07

    确实有点帅！

    回复
  18. xiao @ 2008-07-08 at 17:07

    这个是什么工具呢，能不能介绍下，我也想拿来测试-。-

    回复
  19. Dohl @ 2008-07-08 at 21:55

    完全不懂,怎么才能看到这效果.

    回复
  20. 空帷 @ 2008-08-13 at 13:11

    作者并不是用独立的工具完成的。
    先后用了 Ruby 脚本、Ruby/SDL、GIMP、TmpGenc 等语言和工具来“一帧一帧”完成的。
    换句话说，作者是先逐帧输出了 bmp 图然后合并成视频的。

    回复

  21. Pingback: 蹲乐 UED » Blog Archive » 关于REFLOW

  22. Pingback: jsssc - 影响 reflow 的因素及其优化

  23. 右右 @ 2009-06-11 at 15:15

    咦！同时看到怿飞和秦歌哦～呵呵！很神奇的东东挺好玩～

    回复
  24. will @ 2009-08-03 at 12:34

    所以说学习前端就是学习艺术,哈哈

    回复

  25. Pingback: 影响 reflow 的因素及其优化 · hello,JavaScript

  26. Pingback: 第五章：将样式表放在顶部 —《高性能网站建设指南》读书笔记 – im Png

  27. Pingback: 重温Reflow | IInterest

  28. Pingback: 影响 reflow 的因素及其优化 | HTML5 CSS3 JavaScript

给 Robin 回复 点击这里取消回复。

（必填）

（必填）