从输入URI到浏览器渲染中间都经历了什么

这篇文章总共分为两个部分，第一部分我会把从输入url到浏览器渲染的整个流程给大致说一下。第二部分我就会一一介绍各个部分的详细作用。

一、从输入url到浏览器渲染的整个流程

　  1.DNS域名解析

　　2.建立TCP/IP链接

　　3.WebServer(nginx,tomcat等)

　　4.服务器返回一个HTTP请求

　　5.浏览器显示HTML

二、各个模块的具体作用

　　一、DNS域名解析

　　　  DNS域名解析查询的方法有两种，一种是递归解析，一种是迭代解析。

　　　　递归解析：局部DNS服务器自己负责向其他的DNS服务器进行查询，先从该域名的根服务器进行查询，如果查询不到就会一级级向下查询，最后查询的结果由DNS服务器返回给客户端。

　　　　迭代解析：当局部服务器不能回答客户机的DNS查询时，就会通过迭代解析来进行查询。局部DNS服务器不是自己向其他DNS服务器进行查询，而是把能解析该域名的其他DNS服务器的IP返回给客户端的DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询，直到得到查询结果为止。

　　二、建立TCP/IP链接

　　　　当拿到域名对应的IP时，浏览器就会尝试与服务器建立TCP/IP链接。

　　　　TCP/IP的三次握手：

　　　　　　第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；

　　　　　　   第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态。

　　　　　　   第三次握手：客户端A收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端B，服务端B检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了。

　　三、 WebServer(nginx,tomcat等)

　　　　现在很多网站都会用到反向代理，原因就是当用户访问量达到一定程度时一台服务器已经远远不够了，这时候就需要把同一应用部署到多台服务器上，一道道负载均衡的效用。此时客户端不是通过HTTP协议访问具体的服务器，而是先访问到Nginx/tomcat上，再由他们来请求服务器，然后将结果返回。

　　四、服务器返回一个HTTP请求

　　　　HTTP响应由3个部分构成，分别是：状态行，响应头(Response Header)，响应正文。

　　　　状态行：状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

　　　　1xx：信息性状态码，表示服务器已接收了客户端请求，客户端可继续发送请求。

　　　　  2xx：成功状态码，表示服务器已成功接收到请求并进行处理。

　　　　  3xx：重定向状态码，表示服务器要求客户端重定向。

　　　　  4xx：客户端错误状态码，表示客户端的请求有非法内容。

　　　　  5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误。

　　五、浏览器显示HTML

　　　  因为不同浏览器解析的过程不太一样，下面我们就以webkit为例。

　　　　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。

　　　　浏览器在解析html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。

　　　　解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。

　　　　DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。

　　　　页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

　　　　当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。所以我明平时的代码中，js是放在html文档末尾的。

　　　　JS的解析是由浏览器中的JS解析引擎完成的，比如谷歌的是V8。JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。