浏览器渲染原理简介.pdfVIP

浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文《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 树，因为一些像