为什么要了解浏览器是如何工作的？？？
想要写出一个最佳实践的页面，要实现性能优化，就要好好了解了解浏览器的工作原理。
了解浏览器如何进行加载，可以在引用外部样式表文件、外部 JavaScript 文件时，将他们放到合适的位置，使浏览器以最快的速度及合理的顺序将文件加载完毕。
了解浏览器如何进行解析，可以在构建 DOM 结构，组织 CSS 选择器时，选择最优的写法，提高浏览器的解析效率。
了解浏览器如何进行渲染，明白渲染的过程，在设置元素属性，编写 JavaScript 文件时，可以减少 “reflow” “repaint” 的消耗。
- 浏览器的主要功能及构成
浏览器的主要功能 是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。
浏览器的主要构成
浏览器的主要组件包括：
用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎 － 用来查询及操作渲染引擎的接口。
渲染引擎 － 用来显示请求的内容，例如，如果请求内容为 html，它负责解析 html 及 css，并将解析后的结果显示出来。
网络 － 用来完成网络调用，例如 http 请求，它具有平台无关的接口，可以在不同平台上工作。
UI 后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
JS 解释器 － 用来解释执行 JS 代码。
数据存储 － 属于持久层，浏览器需要在硬盘中保存类似 cookie 的各种数据，HTML5 定义了 web database 技术，这是一种轻量级完整的客户端存储技术。
浏览器主要组件
- 浏览器的渲染
2.1 渲染引擎简介
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。
默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式，这里先不讨论插件及扩展，只讨论渲染引擎最主要的用途——显示应用了 CSS 之后的 html 及图片。
2.2 渲染流程
渲染引擎基本流程
渲染引擎首先通过网络获得所请求文档的内容，通常以 8K 分块的方式完成，即以 8K 每块下载 html 页面。
然后解析页面生成 DOM 树，遇到 CSS 标签或 JS 脚本标签就新起线程去下载他们，并继续构建 DOM。
CSS 下载完后解析为 CSS 规则树，浏览器结合 CSS 规则树和 DOM 树生成 Render Tree。Render Tree 由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
JavaScript 下载后可以通过 DOM API 修改 DOM，通过 CSSOM(CSS Object Model) API 修改样式作用域 Render Tree。注意：构建 CSSOM 会阻塞 JavaScript 的执行，JavaScript 的执行也会阻塞 DOM 的构建。
每次修改会造成 Render Tree 的重新布局和重绘。只要修改 DOM 或修改了元素的形状或大小，就会触发 Reflow，单纯修改元素的颜色只需 Repaint 一下（调用操作系统 Native GUI 的 API 绘制）。
Render Tree 构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历 Render Tree，并使用 UI 后端层绘制每个节点。也可用下图描述：
渲染引擎基本流程
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 Render Tree。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
2.3 reflow 与 repaint
现在再表述一下 HTML 页面加载和解析的流程：
用户输入网址（假设是个 html 页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回 html 文件；
浏览器开始载入 html 代码，发现
浏览器发出 CSS 文件的请求，服务器返回这个 CSS 文件；
浏览器继续载入 html 中 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行 JavaScript 代码的