从输入url到浏览器呈现网页发生了什么？

2021-05-16 10:30

阅读：552

标签：color 网页 mac ip地址 css样式 control 经历返回 tcp三次握手

大致能分成两个部分:网络通信与页面渲染

一.网络通信

互联网各个网络设备间的通信均基于TCP/IP协议，此协议将整个过程进行分层，由上至下分别为: 应用层、传输层、网络层和数据链路层

1.输入URL

2.应用层用DNS解析域名

解析url域名，检查本地是否有对应的IP地址，有则返回，没有则请求上级DNS服务器

备注:DNS domain name system,由解析器和域名服务器组成，主要用于解析域名为IP地址

3.应用层发送http请求

http请求由请求报头与请求体组成，请求体为请求的数据，请求头包含请求方式（get、post。。）协议（http、https。。）是否包含cookie等信息

4.传输层传输报文

为了方便传输将IP协议大块的数据分割为以报文段为单位的小数据包，并为其标号，方便服务端还原。

为了保证传输的安全可靠，将经历TCP三次握手:
发送端发送带有SYN标志的数据包给接收端，在一定的时间内等待回复；

接受段接收到数据包并确认无误后发送带有SYN/ACK标志的数据包给发送端，代表已接收，确认无误；

发送端再发送带有ACK标志的数据包给接收端代表握手成功。

SYN: synchronize 同步

ACK:Acknowledgement 确认

5.网络层查询MAC地址

IP协议的作用是把分割好得报文发送给服务端，但在此之前得先知道对方的MAC地址。

IP地址与MAC一一对应，IP地址能随意换，但MAC不会变，提供ARP协议查询到MAC地址

MAC: media access control 媒体访问控制，可理解为物理地址，硬件地址，每个设备都有独一无二的MAC地址

6.数据链路层传输数据

提供数据链路层传输数据，至此客户端发送完毕。

7.服务端接收数据

客户端在数据链路层获取数据，层层上传至应用层，在传递过程中将数据包还原成完整的http请求

8.服务端响应请求

服务端找到资源并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9.请求成功后返回html文件，进入页面渲染阶段

二、页面渲染

1.解析HTML构建DOM树，即由节点构成的树

解析和构建同时进行，由上至下地进行解析，这里注意几点:

a.外部样式的加载会阻塞后续内部脚本的执行

b.外部样式的加载不会阻塞外部脚本的加载，但会阻塞其执行

c.如果外部脚本由async（IE为defer），则外部样式不会阻塞加载和执行

d.动态加载的外部样式不影响外部脚本加载执行

2.构建渲染树，即将css样式应用到dom树上

webkit称之为附着

3.布局

树节点的大小、位置信息等的运算

4.绘制

将树绘制在屏幕上。

本文总结自:http://www.cnblogs.com/kongxy/p/4615226.html与http://www.cnblogs.com/dojo-lzz/p/3983335.html