转载请注明出处： http://blog.csdn.net/zhuxuanfang/article/details/38474489
众所周知，我们在浏览器的地址栏中输入一个有效的网址，浏览器就会发送一个HTTP请求到服务器端，服务器端会返回相应的数据（一般是一个HTML文档，若干的CSS文件，若干的js文件以及相关的图片等等），浏览器会解析该HTML文档，然后将解析的结果显示出来。那么，大家是否知道浏览器是如何解析HTML文档，又是如何将解析结果显示出来？ 呵呵，我来解释一下吧
目前，主流的浏览器有Internet Explorer, Firefox, Chrome, Safari及Opera。它们的结构大体如下（详细参考：http://ued.ctrip.com/blog/?p=3287）：
1. 用户接口——包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分
3. 渲染引擎——负责显示请求的内容。例如从服务端获取到HTML及CSS时，它会负责解析HTML及CSS，并将解析结果显示到窗口中。
6. Javascript解释器。用于解析执行JavaScript代码。
7. 数据存储。这是一个持久层，浏览器会将所有数据存到硬盘上，如cookies。
其中，渲染引擎从网络上获取到请求内容后，会进行如下处理工作：
第一步：将HTML文档解析为DOM(Document Object Model) Tree（此过程的属性值为specified value）。例如：
<html>
<head></head>
<body>
<p>Good morning, I’m nana</p>
</body>
</html>转化为DOM Tree之后，变为：
第二步：根据css样式得到渲染树（此过程的属性值已经由specified value转为computed value）。在这个过程中，relative定位元素的offset会被忽略，display属性为none的元素不产生任何box，同时该元素的任何孩子元素也不产生box，即便该孩子元素的display属性值被设为非none。凡是display属性不为none的元素均产生一个box（包括visibility属性值为hidden的元素），每个box类似于下图：
为该元素节点设置的一些属性值（例如border-radius等）都会应用在该box上。至于该box的width，height，margin的计算过程将在后面博文中讲解。
第三步：将渲染树渲染到canvas上（此时的属性值已经由computed value转为used value）。渲染过程是按照元素的stack level由小到大的顺序渲染上去的。具体的渲染过程将在后面博文中讲解。需要一提的是，在这个过程中，relative定位元素的offset会被应用起来，这有可能造成页面上元素重叠的情况。
第四步：对于continuous media,user agent会提供一个viewport用来将canvas展示给用户，且viewport会在canvas中的root元素外面包一个initial containing block。如果canvas的內容尺寸大于viewport的尺寸，user agent会提供一个scroll bar供用户来查看其余内容。（此时的属性值已经由used value转为actual value）对于paged media,这里不作考虑。
经过如上四步，用户即可看到网页。目前，由于浏览器版本较高，它并不是等到所有元素都渲染好了才展示给用户，因此，如果网速较慢，我们会看到网页是慢慢的展现给用户的。
网页渲染的整个过程就是酱紫的，具体细节以后再告诉大家哈，今天到此为止啦！
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
