先了解几个基本概念：

DOM

Document Object Model,浏览器将HTML解析成树形的数据结构；输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接口供js等调用。

CSSOM

CSS Object Model,浏览器将CSS解析成树形的数据结构

Render Tree

DOM和CSSOM合并后生成Render Tree

image

Layout

计算出Render Tree每个节点的具体位置

Painting

通过显卡，将Layout后的节点内容分别呈现到屏幕上

具体的流程：
当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。

加载说的是获取资源文件的过程，如果在加载过程中，遇到外部css文件盒图片，浏览器会另外发出一个请求，来获取css文件盒相应的图片，这个请求是异步的，并不会影响html文件。

遇到JavaScript文件，html文件会刮起渲染的线程，等待JavaScript加载完毕后，html文件再继续渲染。

因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。

css文件下载完后也会进行渲染，生成相应的CSSOM。

当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。

浏览器就会进入Layout环节，将所有的节点位置计算出来。

通过Painting环节将所有的节点内容呈现到屏幕上。

常规流程

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

浏览器的主要组件包括：

1. 用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2. 浏览器引擎－用来查询及操作渲染引擎的接口。

3. 渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4. 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5. UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6. JS解释器－用来解释执行JS代码。

7. 数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database
   技术（localstorage），这是一种轻量级完整的客户端存储技术