浏览器渲染原理简介.pdf

浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文《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 html head titleWeb page parsing/title /head body div h1Web page parsing/h1 pThis is an example Web page./p /div /body /html 上面这段HTML 会解析成这样： 下面是另一个有SVG 标签的情况。 CSS 解析 CSS 的解析大概是下面这个样子（下面主要说的是Gecko 也就是Firefox 的玩法），假设我 们有下面的HTML 文档： doc titleA few quotes/title para Franklin said that quoteA penny saved is a penny earned./quote /para para FDR said quoteWe have nothing to fear but spanfear itself./span/quote /para /doc 于是DOM Tree 是这个样子： 然后我们的CSS 文档是这样的： /* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-size: 3em; } /* rule 3 */ para { display: block; } /* rule 4 */ [class=emph] { font-style: italic; } 于是我们的CSS Rule Tree 会是这个样子： 注意，图中的第4 条规则出现了两次，一次是独立的，一次是在规则3 的子结点。所以，我 们可以知道，建立CSS Rule Tree 是需要比照着DOM Tree 来的。CSS 匹配DOM Tree 主要 是从右到左解析CSS 的Selector，好多人以为这个事会比较快，其实并不一定。关键还看我 们的CSS 的Selector 怎么写了。 注意：CSS 匹配HTML 元素是一个相当复杂和有性能问题的事情。所以，你就会在N 多地 方看到很多人都告诉你，DOM 树要小，CSS 尽量用id 和class，千万不要过渡层叠下去，…… 通过这两个树，我们可以得到一个叫Style Context Tree，也就是下面这样（把CSS Rule 结 点Attach 到DOM