浏览器请求到页面的展示过程

看了计算机网络、javascript权威指南，了解了些浏览器知识，总结一下地址的输入到页面的呈现过程。

一、DNS解析过程

二、tcp/ip通信

14.215.177.38服务器接到请求后，照着封装解封得到上层数据。

三、服务器响应

服务器响应将html返回给请求客户端。

四、客户端解析返回html

1、GUI渲染线程创建Document对象（dom树），开始解析web页面，解析html元素或文本后添加element对象或text对象节点到dom树，然后在渲染树绘制盒，这个阶段document.readystate属性值是“loading”。

2、GUI渲染线程遇到没有async和defer属性的<script>元素时，添加节点到dom树。GUI渲染线程阻塞，如果是内部脚本，则启用JavaScript线程处理脚本；如果是外部脚本，则下载脚本，然后启用JavaScript线程处理脚本。在处理脚本过程中如果有使用dom的api，如document.wirte()，会阻塞JavaScript线程启用GUI渲染线程添加节点到dom树，然后在渲染树绘制盒，完成后再阻塞GUI渲染线程，开启JavaScript线程处理脚本。脚本处理完毕后JavaScript线程阻塞，GUI渲染线程开启继续解析web页面。

3、当GUI渲染线程遇到设置async属性的<script>元素时，会下载脚本，并继续解析web页面，当脚本下载完，就会GUI渲染线程阻塞，JavaScript线程启动立即执行脚本，异步脚本禁止使用document.write（可能为了立即执行并解析，所以没有暂停解析或关闭文档流，无法确定在哪点write），使用会发黄色警告，执行完后会阻塞JavaScript线程，GUI渲染线程继续解析web页面。

4、文档解析完成后。document.readyState属性变成“interactive”。

5、之前GUI渲染线程解析到的defer属性的<script>的脚本会在这时按照文档的顺序开始执行，这时候脚本可以访问完整的dom树,禁止使用document.write()。

6、Document对象触发DOMContentLoaded。程序从同步脚本执行转到异步事件驱动阶段（事件触发线程、定时器线程、异步请求线程）。

7、文档虽然完全解析，但可能还有图片等内容等待载入。当所有内容完成载入，并且异步脚本完成执行，document.readyState属性变为“complete”，触发window对象的load事件。

8、往后都是异步驱动阶段（事件触发线程、定时器线程、异步请求线程进行处理）。