浏览器输入url到页面渲染经历了什么?

143 阅读2分钟

一、使用http协议访问web

web是在http协议上进行通信的,当客户端通过指定的地址获取(上传)服务器资源。服务器把相应资源返回给客户端。 要了解http就要先了解TCP/IP协议。而HTTP是他的一个子集。TCP/IP中最重要的就是分层,分为应用层、传输层、网络层,数据链路层。

  1. 应用层预存了各种应用服务,例如FTP、DNS、HTTP等,作为发送端的客户端在应用层(HTTP协议)发出一个web页面的请求,DNS会先解析url对应的IP地址,HTTP针对目标服务器生成请求报文。。
  2. 传输层有TCP协议将应用层收到的数据进行分割(HTTP请求报文)。并在每个数据做好记号和端口号发送给网络层。
  3. 网络层会增加作为通信目的的MAC地址后发给链路层。

这样接收端服务器收到数据后会再次向上一层层传递最终到应用层。发送端在每一层的传输中都会给数据添加该层所属的头部信息,接收端在每一层传输中会把对应的首部消去。 为保证数据能达到目标,tcp还采用了三次握手策略。

二、浏览器处理数据

当客户端收到接收端返回的相应的html文件后。js引擎会对文件进行渲染。

  1. 构建DOM树,浏览器会根据标签之间的嵌套结构,词法,语法分析将其构建为一颗dom树。
  2. 构建cssom树。
  3. 将dom树和cssom树合并成一个渲染树。
  4. 根据渲染树进行布局。
  5. 对渲染树上的节点进行绘制。

最后页面就呈现在我们面前。