• 呈现器的Dirty位系统与各种布局介绍

    Layout的各种方式
    服务器君一共花费 32.166 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    为避免对所有细小更改都进行整体布局,浏览器采用了一种“dirty 位”系统(Dirty bit system)。如果某个呈现器发生了更改,或者将自身及其子代标注为“dirty”,则需要进行布局。

    有两种标记:“dirty”和“children are dirty”。“children are dirty”表示尽管呈现器自身没有变化,但它至少有一个子代需要布局(Layout)。

    全局布局

    全局布局是指触发了整个呈现树范围的布局,触发原因可能包括:

    1. 影响所有呈现器的全局样式更改,例如字体大小更改。
    2. 屏幕大小调整。

    增量布局

    布局可以采用增量方式,也就是只对 dirty 呈现器进行布局(这样可能存在需要进行额外布局的弊端)。

    当呈现器为 dirty 时,会异步触发增量布局。例如,当来自网络的额外内容添加到 DOM 树之后,新的呈现器附加到了呈现树中。

    Reflow 增量布局 - 只有 dirty 呈现器及其子代进行布局

    异步布局和同步布局

    增量布局是异步执行的。Firefox 将增量布局的“reflow 命令”加入队列,而调度程序会触发这些命令的批量执行。Webkit 也有用于执行增量布局的计时器:对呈现树进行遍历,并对 dirty 呈现器进行布局。

    请求样式信息(例如“offsetHeight”)的脚本可同步触发增量布局。

    全局布局往往是同步触发的。

    有时,当初始布局完成之后,如果一些属性(如滚动位置)发生变化,布局就会作为回调而触发。

    优化

    如果布局是由“大小调整”或呈现器的位置(而非大小)改变而触发的,那么可以从缓存中获取呈现器的大小,而无需重新计算。

    在某些情况下,只有一个子树进行了修改,因此无需从根节点开始布局。这适用于在本地进行更改而不影响周围元素的情况,例如在文本字段中插入文本(否则每次键盘输入都将触发从根节点开始的布局)。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [PHP程序设计] PHP中的Hash算法 3 个条目
  2. [软件工程与项目管理] 呈现器的布局与绘制 11 个条目
  3. [PHP程序设计] PHP与函数式编程 1 个条目
  4. [Python程序设计] Python数据类型 11 个条目
  5. [PHP程序设计] 命令式编程范式 6 个条目
  6. [PHP程序设计] PHP扩展模块安装 1 个条目
  7. [智力开发与知识管理] 整体性学习步骤 9 个条目
  8. [数据库技术] 无限级分类数据表设计 4 个条目
  9. [软件工程与项目管理] 了解一点WebKit 9 个条目
  10. [Python程序设计] Tornado背景知识介绍 4 个条目
  11. [Python程序设计] 写几个简单的Tornado程序吧 5 个条目
  12. [PHP程序设计] PHP数组探索 4 个条目
窗口 -- [博客]