10
2013
06

浏览器工作原理 - 布局(layout或reflow)

       当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow

  Html使用基于流的布局模型,意味着大部分时间,可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性,所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外,比如html tables。

  坐标系统相对于根frame,使用top和left坐标。

  布局是一个递归的过程,由根渲染对象开始,它对应html文档元素,布局继续递归的通过一些或所有的frame层级,为每个需要几何信息的渲染对象进行计算。

  根渲染对象的位置是0,0,它的大小是viewport-浏览器窗口的可见部分。

  所有的渲染对象都有一个layout或reflow方法,每个渲染对象调用需要布局的children的layout方法。

  

Dirty bit系统

  为了不因为每个小变化都全部重新布局,浏览器使用一个dirty bit系统,一个渲染对象发生了变化或是被添加了,就标记它及它的children为dirty——需要layout。存在两个标识——dirty及children are dirty,children are dirty说明即使这个渲染对象可能没问题,但它至少有一个child需要layout。

  

全局和增量layout

  当layout在整棵渲染树触发时,称为全局layout,这可能在下面这些情况下发生:

  1. 一个全局的样式改变影响所有的渲染对象,比如字号的改变。

  2. 窗口resize。

  layout也可以是增量的,这样只有标志为dirty的渲染对象会重新布局(也将导致一些额外的布局)。增量layout会在渲染对象dirty时异步触发,例如,当网络接收到新的内容并添加到Dom树后,新的渲染对象会添加到渲染树中。

image

增量layout

  

异步和同步layout

  增量layout的过程是异步的,Firefox为增量layout生成了reflow队列,以及一个调度执行这些批处理命令。WebKit也有一个计时器用来执行增量layout-遍历树,为dirty状态的渲染对象重新布局。

  另外,当脚本请求样式信息时,例如“offsetHeight”,会同步的触发增量布局。

  全局的layout一般都是同步触发。

  有些时候,layout会被作为一个初始layout之后的回调,比如滑动条的滑动。


优化

  当一个layout因为resize或是渲染位置改变(并不是大小改变)而触发时,渲染对象的大小将会从缓存中读取,而不会重新计算。

  一般情况下,如果只有子树发生改变,则layout并不从根开始。这种情况发生在,变化发生在元素自身并且不影响它周围元素,例如,将文本插入文本域(否则,每次击键都将触发从根开始的重排)。

  

layout过程

  layout一般有下面这几个部分:

  1. parent渲染对象决定它的宽度

  2. parent渲染对象读取chilidren,并:

    a. 放置child渲染对象(设置它的x和y)

    b. 在需要时(它们当前为dirty或是处于全局layout或者其他原因)调用child渲染对象的layout,这将计算child的高度

    c. parent渲染对象使用child渲染对象的累积高度,以及margin和padding的高度来设置自己的高度-这将被parent渲染对象的parent使用

    d. 将dirty标识设置为false

  Firefox使用一个“state”对象(nsHTMLReflowState)做为参数去布局(firefox称为reflow),state包含parent的宽度及其他内容。

  Firefox布局的输出是一个“metrics”对象(nsHTMLReflowMetrics)。它包括渲染对象计算出的高度。

  

宽度计算

  渲染对象的宽度使用容器的宽度、渲染对象样式中的宽度及margin、border进行计算。例如,下面这个div的宽度:

  <div />

  webkit中宽度的计算过程是(RenderBox类的calcWidth方法):

容器的宽度是容器的可用宽度和0中的最大值,这里的可用宽度为:contentWidth=clientWidth()-paddingLeft()-paddingRight(),clientWidth和clientHeight代表一个对象内部的不包括border和滑动条的大小

元素的宽度指样式属性width的值,它可以通过计算容器的百分比得到一个绝对值

加上水平方向上的border和padding

  到这里是最佳宽度的计算过程,现在计算宽度的最大值和最小值,如果最佳宽度大于最大宽度则使用最大宽度,如果小于最小宽度则使用最小宽度。最后缓存这个值,当需要layout但宽度未改变时使用。

  

Line breaking

  当一个渲染对象在布局过程中需要折行时,则暂停并告诉它的parent它需要折行,parent将创建额外的渲染对象并调用它们的layout。


« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。