从输入URL到页面加载发生了什么？

输入URL后，需要找到这个URL对应的服务器，为了查询服务器地址，第一步需要实现从网址到对应ip的转换，浏览器首先依次查询自身缓存，系统缓存和路由器缓存的记录，如果没有则查询本地host文件，还没有就向DNS服务器发送域名解析请求。

拿到域名后，浏览器通过随机端口向服务器指定端口发起TCP连接请求，通过运输层，网络层，数据链路层，物理层到达服务器，经过三次握手后建立TCP连接。

三次握手后，就可以传输数据了，客户端将要发送的内容构建成HTTP请求报文并封装在TCP包中，通过TCP协议发送到服务器指定端口。

服务器解析HTTP请求并按照报文格式封装成需要的HTTP对象，返回给浏览器。数据传输完毕后，就通过四次分手将客户端和服务器的连接释放。

浏览器根据拿到的响应报文进行页面的解析和渲染。

DNS解析

输入URL后，需要找到这个URL对应的服务器，为了查询服务器地址，第一步需要实现从网址到对应ip的转换，浏览器首先依次查询自身缓存，系统缓存和路由器缓存的记录，如果没有则查询本地host文件，再没有就向DNS服务器发送域名解析请求。

DNS查询过程

域名系统DNS

DNS能够将互联网的主机名转换成ip地址，为了减少开销，DNS是以UDP用户数据报的形式发送解析请求的。

域名解析过程中有两种查询方式：

递归查询

类似主机向服务器A发查询请求，若未找到则由服务器A向服务器B发起查询，未找到再向服务器C发起查询请求，以此类推，最后再将查询结果依次经过服务器C，服务器B，服务器A返回给主机的查询模式。

由于本地域名服务器距离主机一般只有几个路由的距离，主机向本地域名服务器查询一般采用递归查询。

迭代查询

类似服务器A向服务器B发查询请求，若未找到则将查询结果返回给服务器A，由服务器A继续向服务器C发送请求，以此类推，最后得到查询结果的查询模式。

本地域名服务器向根域名服务器的查询一般采用迭代查询。

TCP连接

浏览器通过随机端口向服务器指定端口发起TCP连接请求，通过运输层，网络层，数据链路层，物理层到达服务器，经过三次握手后建立TCP连接。

五层协议体系结构

应用层：以报文的方式通过应用进程间的交互完成特定网络应用。常见的应用层协议有域名系统DNS，HTTP协议等。

运输层：为应用层的报文段或用户数据报提供传输服务。运输层的协议有TCP协议和UDP协议。

网络层：将运输层的报文段或用户数据报封装成分组，以分组(又称为IP数据报)的形式在网络中转发。

数据链路层：将网络层的IP数据报封装成帧，在两个相邻结点(路由器或其他传输媒体)之间传输。

物理层：在链接各种计算机的传输媒体之间传输数据比特流。

TCP和UDP

TCP提供面向连接的，可靠的数据传输服务。以报文段的形式传输；

UDP提供无连接的，尽最大努力的数据传输服务。以用户数据报的形式传输。

三次握手

第一次握手：客户端进程发送连接请求报文段给服务器，客户端进程进入sync-sent(同步已发送)状态。

第二次握手：服务器收到请求报文段，如果同意建立连接则向客户端发送确认报文段，服务器进程进入sync-rcvd(同步收到)状态。

第三次握手：客户端进程收到服务器的确认后，再给服务器进程发送确认。

第三次握手的原因是为了防止已失效的连接请求报文段突然又传回给服务器进程从而产生错误。假设客户端发送第一次连接请求由于网络滞留了，于是客户端又发送了一次请求并成功建立连接，数据传输完毕后就释放了连接。在释放连接后的某个时间段内客户端的第一次报文段又到达了服务器并被服务器进程确认，如果没有第三次握手，则服务器会一直等待客户端发送数据，从而浪费许多资源。

发送HTTP请求

三次握手后，就可以传输数据了，客户端将要发送的内容构建成HTTP请求报文并封装在TCP包中，通过TCP协议发送到服务器指定端口。

HTTP请求报文格式

HTTP请求报文一般由请求行和请求头组成，请求头用来说明报文主体的一些信息。请求报文和响应报文的区别就是开始行的不同。

请求报文中的开始行称为请求行，HTTP请求行只有三个内容，即方法，URL和HTTP版本。

GET sample.jsp HTTP/1.1

请求方法有：

GET 请求读取URL中的信息

POST 向指定资源提交数据，如提交表单，上传文件等、

HEAD 请求URL所标志信息的首部

DELETE 请求服务器删除指定的页面

OPTIONS 允许客户端查看服务器性能

PUT 用从客户端向服务器传送的数据来替换指定文档的内容

CONNECT 用于代理服务器

TRACK 用于测试和诊断

服务器处理请求并返回报文

服务器解析HTTP协议并按照报文格式封装成需要的HTTP请求对象，返回给浏览器。数据传输完毕后，就通过四次分手将客户端和服务器的连接释放。

HTTP响应报文格式

HTTP响应报文一般由状态行，响应头和响应报文组成，响应头用来说明报文主体的一些信息。

响应报文中的开始行称为状态行，HTTP状态行也只有三个内容，即HTTP版本，状态码和解释状态码的简单短语。

HTTP/1.1 200 OK

状态码的含义：

1xx 服务器收到请求

2xx 请求成功，开始处理

3xx 重定向

4xx 客户端错误

5xx 服务器错误

TCP四次挥手

第一次挥手：客户端发送释放连接请求，不再发送数据，但还可接收数据。

第二次挥手：服务器收到连接释放的报文段后即发出确认，这样从客户端到服务器的连接就释放了。

第三次挥手：等所有数据传输完毕后，服务器发送终止请求给客户端，表示不再传输数据给客户端。

第四次挥手：最后客户端收到服务器关闭请求后发送确认报文段，完成四次挥手。

浏览器解析和渲染

浏览器根据拿到的响应报文进行解析和页面的渲染。

构建DOM树

HTML文档会被解析成一棵以document为根的DOM树，解析过程中如果遇到JavaScript，则会暂停解析并传输下载相应的文件造成阻塞，故推荐将JavaScript脚本放在HTML文件的后面。

构建CSSSOM树

浏览器根据外部样式，内部样式和内联样式来解析CSS，构建CSSSOM树。

构建渲染树和布局

DOM树和CSSOM树构建完毕后会融合成渲染树，然后浏览器会确认页面各元素的位置。

页面绘制和优化

浏览器根据布局结果进行页面的绘制，并优化页面内容，减小CPU消耗。

渲染结束后整个页面就呈现在我们面前了。