浏览器的渲染原理简介

看到这个标题你们必定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的不少细节讲得很细，并且也被翻译成了中文。为何我还想写一篇呢？由于两个缘由， 

• 这篇文章太长了，阅读成本太大，不能一口气读完。
• 花了大力气读了这篇文章后能够了解不少，但彷佛对工做没什么帮助。

因此，我准备写下这篇文章来解决上述两个问题。但愿你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工做上的东西。 

浏览器工做大流程 

废话少说，先来看个图： 

从上面这个图中，咱们能够看到那么几个事： 

1）浏览器会解析三个东西： 

• 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
• CSS，解析CSS会产生CSS规则树。
• Javascript，脚本，主要是经过DOM API和CSSOM API来操做DOM Tree和CSS Rule Tree.

2） 解析完成后，浏览器引擎会经过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意： 

• Rendering Tree 渲染树并不等同于DOM树，由于一些像Header或display:none的东西就不必放在渲染树中了。
• CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每一个Element。也就是DOM结点。也就是所谓的Frame。
• 而后，计算每一个Frame（也就是每一个Element）的位置，这又叫layout和reflow过程。

3）最后经过调用操做系统Native GUI的API绘制。 

DOM解析 

HTML的DOM Tree解析以下： 

Html代码 

1. <</span>html>  
2. <</span>html>  
3. <</span>head>  
4.     <</span>title>Web page parsing</</span>title>  
5. </</span>head>  
6. <</span>body>  
7.     <</span>div>  
8.         <</span>h1>Web page parsing</</span>h1>  
9.         <</span>p>This is an example Web page.</</span>p>  
10.     </</span>div>  
11. </</span>body>  
12. </</span>html>  

上面这段HTML会解析成这样： 

下面是另外一个有SVG标签的状况。 

CSS解析 

CSS的解析大概是下面这个样子（下面主要说的是Gecko也就是Firefox的玩法），假设咱们有下面的HTML文档： 

Html代码