从在地址栏输入域名地址开始，到被展示在屏幕上，中间是怎样一个过程。以下对该过程进行一下探讨。

域名解析

浏览器发送域名给DNS客户端，客户端查找浏览器缓存中有没有请求过这个域名地址（检查本地hosts文件是否有这个网址映射关系），如果有不用再向DNS服务器查询，这个时候拿到的ip地址，会被标记为非权威服务器的应答；没有的话，再向服务器查询。服务器解析之后将该域名对应的IP地址返回给浏览器。

建立TCP连接

获取对象的IP之后，客户端与浏览器开始建立TCP连接，就是三次握手阶段，

客户端：我要请求了... 服务器：知道了，你请求吧..... 客户端：发送请求.....

与服务器建立连接之后，浏览器开始发送http请求来获取资源。浏览器获得响应的文件之后开始渲染。

最先被渲染的html文档，服务器返回的是字节，浏览器需要根据文档定义的编码规则，将字节解析成标签。解析之后，文本具有了语义化，其中有些外部引用的标签比如<link>引用了外部的css文件，浏览器又开始请求该css资源，直到该文件返回，才继续开始渲染DOM Tree。

获取了css文件之后，浏览器开始解析CSSOM。CSSOM就是符合读取选择器规则的索引树，css从右向左开始去读取选择器，比如

#choose div a

先查找a节点元素，在查找div，最后查找id为choose的节点对象，如果不符合，再重新寻找下一个a节点。

按照这个顺序构建的索引树就是CSSOM：

html文档和css文档都解析完成之后，需要将两者结合，构建Render Tree，比如css中有的元素样式设置了隐藏，就不需要在Render Tree中构建。

Render Tree构建完成之后确定了在整体布局上的位置，立马进行渲染。

当标签不断向下解析，碰到脚本之后，会开始执行脚本，如果是外部脚本，再次向浏览器发送请求。由于JS经常会操作DOM，所以一般都是放在最后去执行，以免获取不到DOM对象而报错。同时，如果js脚本中会对DOM结构或css样式产生改变，则会对Render Tree产生改变，需要再次计算布局。

javascript执行完之后，不再对页面布局会产生影响了，这时Render Tree终于可以进行绘制了，一个页面历经重重终于被展示在了屏幕上。

通过上面的分析，当改变DOM结构、位置、尺寸的的时候，会对整体的布局产生印象，这时候需要重新构建Render Tree并对布局进行计算，会提高性能成本和时间成本。