形象化的reflow

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

MarVell 回复 点击这里取消回复。

(必填)

(必填)