#####这个过程大致分为两个部分：网络通信和页面渲染。
1、网络通信
互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层，传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走：
如图
应用层——>传输层——>网络层——>数据链路层
HTTP客户端——>TCP—->IP——>网络
1 2 3 4
| 客户端先检查本地是否有对应的ip地址， 若找到则返回响应的ip地址。 若没有找到则请求上级DNS服务器， 直至找到或到根节点。
|
1 2 3 4
| HTTP请求包括请求报头和请求主体两个部分 ，其中请求报头包含至关重要的信息， 包括请求的方法GET、POST,、目标url、遵循的协议（http，https，ftp）， 返回的信息是否需要缓存，以及客户端是否发送cookie等。
|
1 2 3 4 5 6 7 8 9 10
| 位于传输层的TCP协议为传输报文提供可靠的字节流服务，他为了方便传 输，将打款的数据分割成以报文段为单位的数据包进行管理，并为他们编 号，方便服务器接收时能准确地还原报文信息，TCP协议通过三次握手等 方法保证传输的安全可靠。 三次握手的过程是，发送端先发送一个带有SYN标志的数据包给接收 端，以一定的延时时间内，等待接收的回复，接收端收到数据包后，传回 一个带有SYN/ACK标志的数据包以表示传达确认信息，接收方收到后再发 送一个带有ACK标志的数据包给接收端表示握手成功，在这个过程中，如 果发送端在规定的延时时间内没有收到回复则默认接收方没有收到请求， 而在次发送，知道收到回复为止
|
1 2 3 4 5 6 7
| IP协议的作用是把TCP分割好的各种数据包，传送给接收方。而要保证确 实能够传到接收方还需要接收方的MAC地址，也就是物理地址，IP地址和 MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC 地址一般是固定不变的，Arp协议，可以将IP地址解析成对应的MAC地 址，当通信的双方不再同一个局域网时，需要多次中转才能到达最终的目 标，在中转的过程中，需要通过下一个中转站的MAC地址来搜索下一个中 转目标。8135
|
1 2
| 在找到对方的mac地址以后，就将数据发送到数据链路层传输，这时，客 户端发送请求的阶段结束
|
1 2 3
| 接收端的服务器在链路层收到数据包，再层层向上直到应用层，这过程中 包括在运输层通过TCP协议将分段的数据包重新组成原来的HTTP请求报 文，
|
1 2 3 4 5 6
| 服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回 响应的报文，响应的报文中包括一个重要的信息------状态码。状态码由三 位数字组成，其中比较常见的是200OK表示成功，301表示永久重定向。 即请求的资源已经永久转移到新的位置。在返回301状态码的同事，响应 报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变 再重新发送。
|
1 2
| 请求成功后，服务器会返回相应的HTML文件，接下来就到了页面的渲染 阶段。
|
2、页面渲染
1 2 3 4 5 6 7 8 9 10 11
| 浏览器渲染页面的过程是这样的： 解析HTML以构建DOM树---->构建渲染树---->布局渲染树---->绘制渲染 树。 DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树种加入css 或者html种的style样式而形成的。渲染树只包含需要显示在页面中的DOM 元素，像<head>元素或display属性值为none的元素都不在渲染树中。 在浏览器还没有接收到完整的html文件时，他就开始渲染页面了。在遇到 外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上 述步骤，在收到css文件后会对已经渲染的页面重新渲染，加入他们应有的 样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页 面的重绘或重排。
|
上一篇：JS问题汇总
下一篇：关于单位px,rem,em
