输入url到页面展示的全过程
从输入url到页面展示的全过程
- 域名解析
- 建立TCP连接(3次握手)
- 浏览器发送HTTP请求
- 服务器响应HTTP请求
- 页面渲染
- 关闭连接(4次挥手)
一.域名解析
DNS(Domain Name System,域名系统),因特网上作为域名www.baidu.com和IP地址167.23.10.2相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。
简而言之,域名解析就是从DNS找到对应的ip地址 。
域名解析的步骤:
-
浏览器缓存
浏览器查看
历史记录或者书签
之类,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址 -
本地hosts :
浏览器查看
本地hosts
,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。 -
本地DNS服务器
如果在本地的 hosts 文件没有能够找到对应的 ip 地址, 浏览器会发出一个 DNS请求到本地DNS服务器 。 本地DNS服务器会首先查询它的缓存记录。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。
-
DNS根服务器
本地DNS服务器向DNS根服务器进行查询。 根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器
域服务器的地址
(迭代解析) -
域服务器
本地DNS服务器继续向域服务器发出请求(例如.com域服务器)。.com域服务器收到请求之后,告诉本地DNS服务器,你的域名的解析服务器的地址。
-
域名的解析服务器
本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系. 本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。
二.建立TCP连接(3次握手)
“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”
- 第一次,本机将标识位 SYN 置为 1, seq = x(Sequence number)发送给服务端。此时本机状态为SYN-SENT
- 第二次,服务器收到包之后,将状态切换为SYN-RECEIVED,并将标识位 SYN 和 ACK都置为1, seq = y, ack = x + 1, 并发送给客户端。
- 第三次,客户端收到包后,将状态切换为ESTABLISHED,并将标识位ACK置为1,seq = x + 1, ack = y + 1, 并发送给服务端。服务端收到包之后,也将状态切换为ESTABLISHED。
- 标识位ACK置为1 表示我已确认收到seq为x的包,并回复确认序号ack = x + 1
- 而SYN表示这是我第一次随机生成seq的序列x,此后我每次发送的包都会在上一次发送的基础上增加y(有数据的时候,y是数据的长度,没有的时候y = 1)。*所以,当seq已初始化完成之后,没必要再把SYN置为1
- ACK:确认标识,用于表示对数据包的成功接收。
- SYN:同步标识,表示TCP连接已初始化。
- FIN:完成标识,用于拆除上一个SYN标识。一个完整的TCP连接过程一定会有SYN 和 FIN包。
三.浏览器发送HTTP请求
在应用层,浏览器会分析这个url,并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443, http默认80。
- 请求行:请求行中包括请求的方法,路径和协议版本。
- 请求头:请求头中包含了请求的一些附加的信息,一般是以键值的形式成对存在,比如设置请求文件的类型content-type,以及服务器对缓存的设置。
- 空行:协议中规定请求头和请求主体间必须用一个空行隔开
- 请求主体:对于post请求,所需要的参数都不会放在url中,这时候就需要一个载体了,这个载体就是请求主体。
四.服务器响应HTTP请求
服务端收到请求之后,会根据url匹配到的路径做相应的处理,最后返回浏览器需要的页面资源。浏览器会收到一个响应报文,而所需要的资源就就在报文主体上。与请求报文相同,响应报文也有与之对应的起始行、首部、空行、报文主体,不同的地方在于包含的东西不一样。
- 响应行:响应报文的起始行同样包含了协议版本,与请求的起始行不同的是其包含的还有状态码和状态码的原因短语。
- 响应头:对应请求报文中的请求头,格式一致,但是各自有不同的首部。也有一起用的通用首部。
- 空行
- 报文主体:请求所需要的资源
五.页面渲染
- 解析HTML标签,构建DOM树
- 解析CSS标签,构建CSSOM树
- 把DOM和CSSOM组合成渲染树
- 对渲染树进行布局(称为重排或者回流)
- 绘制渲染树(重绘)
来看看webkit的主要流程:
解析:
- dom树包含页面全部元素
- 渲染树≠dom树,例如:header标签或者display:none的元素,不用放到渲染树中
- 若页面的布局结构改变,会发生重排,重排必定重绘
- 若只是与布局无关的样式(例如:颜色变化),只会发生重绘
- 重排和重绘会消耗性能,重排更消耗性能(重排必重绘)
性能优化:
- 用类名操作样式(而不是js代码)
- 离线操作(display:none…display:block)
- 对于频繁操作的元素,可以脱标(定位,单独占一层,不影响其他元素布局)或者用css3中的动画
六.关闭连接
- 第一次挥手:Client发送一个FIN
(完成标识
),用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。 - 第二次挥手:Server收到FIN后,发送一个ACK(
确认标识
)给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。 - 第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。
- 第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。