前端必的读：浏览器内部工作原理.pdf

前端必读：浏览器内部工作原理 目录 一、介绍 二、渲染引擎 三、解析与DOM树构 四、渲染树构 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型 英文原文：HowBrowsersWork: Behindthe Scenesof ModernWeb Browsers 一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到， 从你在地址栏输入到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefo 、Safari、Chrome及Opera。 本文将基于一些开源浏览器的例子——Firefo 、Chrome及Safari，Safari是部分开 源的。 根据W3C （World Wide Web Consortium万维网联盟）的浏览器统计数据，当前 （2011年5月），Firefo 、Safari及Chrome的市场占有率综合已接近60％。（原文为2009 年10月，数据没有太大变化）因此，可以说开源浏览器已经占据了浏览器市场的半壁江山。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并 将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。 用户用URI （UniformResourceIdentifier统一资源标识符）来指定所请求资源的位置， 在网络一章有更多讨论。 HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范 进行维护，W3C是负责制定web标准的组织。 HTML规范的最新版本是HTML4(/TR/html401/)，HTML5还 在制定中 （译注：两年前），最新的CSS规范版本是2（/TR/CSS2）， CSS3也还正在制定中（译注：同样两年前）。 这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发 者带来了严重的兼容性问题。 但是，浏览器的用户界面则差不多，常见的用户界面元素包括： 用来输入URI的地址栏 前进、后退按钮 书签选项 用于刷新及暂停当前加载文档的刷新、暂停按钮 用于到达主页的主页按钮 奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂 商之间相互模仿和不断改进的结果。 HTML5并没有规定浏览器必须具有的UI元素，但列出了一些常用元素，包括地址栏、 状态栏及工具栏。还有一些浏览器有自己专有的功能，比如Firefo 的下载管理。更多相关 内容将在后面讨论用户界面时介绍。 浏览器的主要构成（High LevelStructure） 浏览器的主要组件包括： 1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用 来显示你所请求页面的主窗口之外的其他部分。 2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。 3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html 及css，并将解析后的结果显示出来。 4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同 平台上工作。 5.UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台 的通用接口，底层使用操作系统的用户接口。 6.JS解释器 － 用来解释执行JS代码。 7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie 的各种数据， HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术 图1：浏览器主要组件 需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实 例，每个Tab就是一个独立的进程。 对于构成浏览器的这些组件，后面会逐一详细讨论。 二、渲染引擎（The renderingengine） 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。 默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件 （一种浏 览器扩展）显示其他类型数据，例如使用PDF阅读器插件，