重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么从Chrome源码看浏览器进行layout布局
本篇文章为大家展示了怎么从Chrome源码看浏览器进行layout布局，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联专注于通州网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供通州营销型网站建设，通州网站制作、通州网页设计、通州网站官网定制、成都微信小程序服务，打造通州网络公司原创品牌,更为您提供通州网站排名全网营销落地服务。
假设有以下html/css：
这在浏览器上面将显示一个框：
为了画出这个框，首先要知道从哪里开始画、画多大，其次是边缘stroke的颜色，就可以把它画出来了：
void draw(SkCanvas* canvas) {
SkPaint paint;
paint.setStrokeWidth(1);//从位置为(200, 200)的地方开始画，宽度为400，高度为100SkRect rect = SkRect::MakeXYWH(200, 200, 400, 100);
canvas->drawRect(rect, paint);
}上面是用Skia画的代码，Skia是一个跨平台的开源2D图形库，是Chrome/firefox/android采用的底层Paint引擎。
为了能够获取到具体的值，就得进行layout。什么叫layout？把css转化成维度位置等可直接用来描绘的信息的过程就叫layout，如下Chrome源码对layout的解释：
// The purpose of the layout tree is to do layout (aka reflow) and store its// results for painting and hit-testing. Layout is the process of sizing and// positioning Nodes on the page.
《从Chrome源码看浏览器如何计算CSS》这篇文章介绍了怎么把css转化成ComputedStyle，上面的div，它被转化后的style如下所示：
width的大小是50，类型是百分比，而margin值是0，类型是auto，这两种都不能直接用来画的。所以需要通过layout计算出具体的数字。
1. 建立layout树
《从Chrome源码看浏览器如何构建DOM树》这篇文章介绍了如何html文本的过程。当解析完收到的html片段后，会触发Layout Tree的构建：
void Document::finishedParsing() {
updateStyleAndLayoutTree();
}每个非display:none/content的Node结点都会相应地创建一个LayoutObject，如下blink源码的注释：
// Also some Node don't have an associated LayoutObjects e.g. if display: none// or display: contents is set.
并建立起它们的父子兄弟关系：
LayoutObject* newLayoutObject = m_node->createLayoutObject(style); parentLayoutObject->addChild(newLayoutObject, nextLayoutObject);
形成一棵独立的layout树。
当layout树建立好之后，紧接着用style计算layout的值。
2. 计算layout值
以上面的div为例，它需要计算它的宽度和margin。
（1）计算宽度
宽度的计算是根据数值的类型：
switch (length.type()) { case Fixed:return LayoutUnit(length.value()); case Percent:// Don't remove the extra cast to float. It is needed for rounding on// 32-bit Intel machines that use the FPU stack.return LayoutUnit(static_cast(maximumValue * length.percent() / 100.0f));
} 如上所示，如果是Fixed，则直接返回一个LayoutUnit封装的数据，1px = 1 << 6 = 64 unit，这也是Blink存储的精度。从这里可以看到，设置小数的px其实是有用的。
如果是Percent百分比，则用百分比乘以***值，而这个***值是用容器传进来的宽度。
（2）计算margin值
上面的div的margin给它设置了margin: 0 auto，需要计算实际的数字。blink会检测两边是不是都为auto，如果是的话就认为是居中：
// CSS 2.1: "If both 'margin-left' and 'margin-right' are 'auto', their used// values are equal. This horizontally centers the element with respect to// the edges of the containing block."const ComputedStyle& containingBlockStyle = containingBlock->styleRef();if (marginStartLength.isAuto() && marginEndLength.isAuto()) {
LayoutUnit centeredMarginBoxStart = std::max(
LayoutUnit(),
(availableWidth - childWidth) / 2);
marginStart = centeredMarginBoxStart;
marginEnd = availableWidth - childWidth - marginStart; return;
}上面第8行用容器的宽度减掉本身的宽度，然后除以2就得到margin-left，接着用容器的宽度减掉本身的宽度和margin-left就得到margin-right。为什么margin-right还要再算一下，因为上面的代码是删减版的，它还有另外一种情况要处理，这里不是很重要，被我省掉了。
margin和width算好了，便把它放到layoutObject结点的盒模型数据结构里面：
m_frameRect.setWidth(width);m_marginBoxOutsets.setStart(marginLeft);
（3）盒模型数据结构
在blink的源码注释里面，很形象地画出了盒模型图：
// ***** THE BOX MODEL *****// The CSS box model is based on a series of nested boxes:// http://www.w3.org/TR/CSS21/box.html//// |----------------------------------------------------|// | |// | margin-top |// | |// | |-----------------------------------------| |// | | | |// | | border-top | |// | | | |// | | |--------------------------|----| | |// | | | | | | |// | | | padding-top |####| | |// | | | |####| | |// | | | |----------------| |####| | |// | | | | | | | | |// | ML | BL | PL | content box | PR | SW | BR | MR |// | | | | | | | | |// | | | |----------------| | | | |// | | | | | | |// | | | padding-bottom | | | |// | | |--------------------------|----| | |// | | | ####| | | |// | | | scrollbar height ####| SC | | |// | | | ####| | | |// | | |-------------------------------| | |// | | | |// | | border-bottom | |// | | | |// | |-----------------------------------------| |// | |// | margin-bottom |// | |// |----------------------------------------------------|//// BL = border-left// BR = border-right// ML = margin-left// MR = margin-right// PL = padding-left// PR = padding-right// SC = scroll corner (contains UI for resizing (see the 'resize' property)// SW = scrollbar width
上面的盒模型耳熟能详，不太一样的是，它还把滚动条给画出来了。
这个盒模型border及其以内区域是用一个LayoutRect m_frameRect对象表示的：
// The CSS border box rect for this box.//// The rectangle is in this box's physical coordinates.// The location is the distance from this// object's border edge to the container's border edge (which is not// always the parent). Thus it includes any logical top/left along// with this box's margins.LayoutRect m_frameRect;
上面源码注释说得很明白，意思是说这个LayoutRect的位置是从它本身的边到容器的边的距离，因此它的距离/位置包含了margin值和left/top的位移偏差。LayoutRect记录了一个盒子的位置和大小：
LayoutPoint m_location; LayoutSize m_size;
上面（1）和（2）计算好宽度后就去设置这个大小，保存起来。
可以在源码里面看到用这个对象对处理的一些获取宽度的方式，如clientWidth：
// More IE extensions. clientWidth and clientHeight represent the interior of// an object excluding border and scrollbar.LayoutUnit LayoutBox::clientWidth() const { return m_frameRect.width() - borderLeft() - borderRight() -
verticalScrollbarWidth();
}clientWidth是除去border和scrollbar的宽度。
而offsetWidth是frameRect的宽度——算上border和scrollbar：
// IE extensions. Used to calculate offsetWidth/Height.LayoutUnit offsetWidth() const override { return m_frameRect.width(); }LayoutUnit offsetHeight() const override { return m_frameRect.height(); }Margin区域是用一个LayoutRectOutsets表示的，这个对象记录了margin的上下左右值：
LayoutUnit m_top;LayoutUnit m_right;LayoutUnit m_bottom;LayoutUnit m_left;
上面已经分析宽高的计算，还差位置的计算。
（4）位置计算
位置计算就是要算出x和y或者说left和top的值，这两个值分别在下面两个函数计算得到：
// Now determine the correct ypos based off examination of collapsing margin// values.LayoutUnit logicalTopBeforeClear = collapseMargins(child, layoutInfo, childIsSelfCollapsing, childDiscardMarginBefore, childDiscardMarginAfter);// Now place the child in the correct left positiondetermineLogicalLeftPositionForChild(child);
用以下html做为例子：
