DOM 树的解析渲染

（结合TCP/IP五层网络模型，OSI是七层网络模型）

获取到html文件

第一步：用户在浏览器地址栏中输入url地址（输入url会发生什么：http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html）后，浏览器根据域名寻找IP地址
（涉及五层网路模型中的网络层，数据链路层，物理层。涉及DNS域名解析系统（应用层）：
1. 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就结束。
2. 如果在本地没有找到对应的ip地址，就到本地域名服务器中去找。
3. 如果本地域名服务器没找到就向根域名服务器发起请求去找。
域名解析涉及的协议：ARP(地址解析协议)）

第二步：找到IP地址后浏览器和服务器建立连接(属于传输层，涉及TCP，UDP协议，TCP的三次握手和松手过程，TCP支持的应用协议主要有：Telnet、FTP、SMTP等；UDP支持的应用层协议主要有：NFS（网络文件系统）、SNMP（简单网络管理协议）、DNS（主域名称系统）、TFTP（通用文件传输协议）等。)

第三步： 浏览器发起HTTP(属于五层网络模型中的应用层，涉及HTTP协议，TODO: 《图解HTTP》)请求（属于五层模型中的应用层），服务器发送回HTTP报文。
接下来就会释放TCP链接，

（HTTP报文的数据部分：如果请求头部有参数：Accept-Encoding:gzip, deflate 字段，响应头部中携带参数Content-Encoding:gzip，则数据是经过压缩的，经过服务器端gzip压缩（压缩不需要代码实现，只需要在服务器中做配置）后的文件(js,html,css)，此时浏览器会先对文件进行解压缩。）

浏览器接收到HTTP报文，获取到其中的数据部分。此时就获得了一个html文件，接下来就是对html文件进行解析的过程。

解析过程实际上就是HTML解析器对html文件的一个解析过程。

1. html解析器将html文件解析为解析（DOM）树（解析器：http://www.voidcn.com/article/p-rebzaxfz-bmt.html）。
   解析器有两个处理过程——词法分析与语法分析。
   词法分析负责把输入切分成符号序列，html的符号包括开始标签、结束标签、属性名及属性值。
   识别出符号后，将其传递给树构建器，并读取下一个字符，以识别下一个符号，这样直到处理完所有输入。

构建DOM树

解析器的解析过程是从上往下，遇到外部文件的时候会加载外部文件并且解析(css,script)和执行（script）完成后再继续解析。
在解析过程中遇到link标签和script标签的时候，有两个问题：
1、一个是script脚本可能会操作DOM。
2、css样式会影响js的执行。

构建呈现树：将css代码应用到DOM树上

涉及css的层叠问题：详细的优先级规则https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
CSS优先级顺序一般而言： 行内 > 内联 > 外部样式

呈现树的每一个节点就是相应的DOM节点的CSS框，每个呈现树节点都有一个与之对应的DOM树节点，但是DOM树节点就不一定有与之对应的呈现树节点。比如diisplay：none的元素就没有对应的呈现树节点。而且位置不一定相对应，比如float和absolute定位。

布局（TODO）

呈现树之后进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。

为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

全局布局和增量布局

全局布局是指触发了整个呈现树范围的布局，触发原因可能包括：

• 影响所有呈现器的全局样式更改，例如字体大小更改。

• 屏幕大小调整。

增量布局：当来自网络的额外内容添加到 DOM 树之后，新的呈现器附加到了呈现树中。

绘制（TODO）

在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。