序言
这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道：
在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了过半的市场份额，因此，是时候来揭开神秘的面纱，一探网络浏览器的内幕了。呃，里面只有数以百万行计的 C++ 代码...
塔利在她的网站上公布了自己的研究成果，但是我们觉得它值得让更多的人来了解，所以我们在此重新整理并公布。
作为一名网络开发人员，学习浏览器的内部工作原理将有助于您作出更明智的决策，并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档，但是我们建议您花些时间来仔细阅读；读完之后，您肯定会觉得所费不虚。保罗·爱丽诗 (Paul Irish)，Chrome 浏览器开发人员事务部
简介
网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在地址栏输入google.com直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了些什么。
网络的模型是同步的。网页作者希望解析器遇到 标记时立即解析并执行脚本。文档的解析将停止，直到脚本执行完毕。如果脚本是外部的，那么解析过程会停止，直到从网络同步抓取资源完成后再继续。此模型已经使用了多年，也在 HTML4 和 HTML5 规范中进行了指定。作者也可以将脚本标注为“defer”，这样它就不会停止文档解析，而是等到解析结束才执行。HTML5 增加了一个选项，可将脚本标记为异步，以便由其他线程解析和执行。
我们要讨论的浏览器
图：规则树
上下文树如下图所示（节点名 : 指向的规则节点）：
图：CSS2 框模型
每一个节点都会生成 0..n 个这样的框。
所有元素都有一个“display”属性，决定了它们所对应生成的框类型。示例：
block-generates a block box.inline-generates oneormoreinlineboxes.none-noboxisgenerated.
默认值是 inline，但是浏览器样式表设置了其他默认值。例如，“div”元素的 display 属性默认值是 block。
您可以在这里找到默认样式表示例：www.w3.org/TR/CSS2/sample.html
定位方案
有三种定位方案：
普通：根据对象在文档中的位置进行定位，也就是说对象在呈现树中的位置和它在 DOM 树中的位置相似，并根据其框类型和尺寸进行布局。
浮动：对象先按照普通流进行布局，然后尽可能地向左或向右移动。
绝对：对象在呈现树中的位置和它在 DOM 树中的位置不同。
定位方案是由“position”属性和“float”属性设置的。
如果值是 static 和 relative，就是普通流
如果值是 absolute 和 fixed，就是绝对定位
static 定位无需定义位置，而是使用默认定位。对于其他方案，网页作者需要指定位置：top、bottom、left、right。
框的布局方式是由以下因素决定的：
框类型
框尺寸
定位方案
外部信息，例如图片大小和屏幕大小
框类型
block 框：形成一个 block，在浏览器窗口中拥有其自己的矩形区域。
图：block 框
inline 框：没有自己的 block，但是位于容器 block 内。
图：inline 框
block 采用的是一个接一个的垂直格式，而 inline 采用的是水平格式。
图：block 和 inline 格式
inline 框放置在行中或“行框”中。这些行至少和最高的框一样高，还可以更高，当框根据“底线”对齐时，这意味着元素的底部需要根据其他框中非底部的位置对齐。如果容器的宽度不够，inline 元素就会分为多行放置。在段落中经常发生这种情况。
图：行
定位
相对
相对定位：先按照普通方式定位，然后根据所需偏移量进行移动。
图：相对定位
浮动
浮动框会移动到行的左边或右边。有趣的特征在于，其他框会浮动在它的周围。下面这段 HTML 代码：
Lorem ipsum dolor sit amet, consectetuer...
显示效果如下：
图：浮动
绝对定位和固定定位
这种布局是准确定义的，与普通流无关。元素不参与普通流。尺寸是相对于容器而言的。在固定定位中，容器就是可视区域。
图：固定定位
请注意，即使在文档滚动时，固定框也不会移动。
分层展示
这是由 z-index CSS 属性指定的。它代表了框的第三个维度，也就是沿“z 轴”方向的位置。
这些框分散到多个堆栈（称为堆栈上下文）中。在每一个堆栈中，会首先绘制后面的元素，然后在顶部绘制前面的元素，以便更靠近用户。如果出现重叠，新绘制的元素就会覆盖之前的元素。
堆栈是按照 z-index 属性进行排序的。具有“z-index”属性的框形成了本地堆栈。视口具有外部堆栈。
示例：
div{position:absolute;left:2in;top:2in;}
结果如下：
图：固定定位
虽然红色 div 在标记中的位置比绿色 div 靠前（按理应该在常规流程中优先绘制），但是 z-index 属性的优先级更高，因此它移动到了根框所保持的堆栈中更靠前的位置。
参考资料
浏览器架构
Grosskurth, Alan.A Reference Architecture for Web Browsers (pdf)
Gupta, Vineet.How Browsers Work - Part 1 - Architecture
解析
Aho, Sethi, Ullman, Compilers: Principles, Techniques, and Tools（即“Dragon book”）, Addison-Wesley, 1986
Rick Jelliffe.The Bold and the Beautiful: two new drafts for HTML 5.
Firefox
L. David Baron,Faster HTML and CSS: Layout Engine Internals for Web Developers.
L. David Baron,Faster HTML and CSS: Layout Engine Internals for Web Developers（Google 技术访谈视频）
L. David Baron,Mozilla's Layout Engine
L. David Baron,Mozilla Style System Documentation
Chris Waterson,Notes on HTML Reflow
Chris Waterson,Gecko Overview
Alexander Larsson,The life of an HTML HTTP request
WebKit
David Hyatt,Implementing CSS（第一部分）
David Hyatt,An Overview of WebCore
David Hyatt,WebCore Rendering
David Hyatt,The FOUC Problem
W3C 规范
层叠样式表第 2 级第 1 次修改 (CSS 2.1) 规范
浏览器构建说明
Firefox.https://developer.mozilla.org/en/Build_Documentation
网友评论