说一说从输入URL到页面呈现都发生了什么?

从你在浏览器输出了一串地址开始,到浏览器呈现页面给你,中间一共都经历了什么?

第一步,执行dns解析

  1. 去chrome浏览器缓存去寻找dns所对应的ip。查看dns:chrome://net-internals/#dns 。
  2. 去操作系统缓存里寻找ip
  3. 去本机hosts文件里寻找ip

第二步,询问宽带运营商

如果前三步都获取不到的时候,进入第二步,浏览器去请求宽带运营商提供的dns解析请求。

第三步,准备发送

拿到目标ip后,浏览器某端口发起的HTTP报文经过在传输层(TCP协议)对收到的数据(HTTP请求报文)进行分割,并在各个报文上打上标记序号及端口号后转发给网络层。在网络层(IP协议),增加作为通信目的地的MAC地址后转发给链路层。这样一来,发往网络的通信请求就准备齐全了。

第四步,发起请求

浏览器某端口发起的tcp请求经过层层路由最后到服务器端的网卡,服务器端链路层收到数据后,按照链路层一直到应用层顺序往上发送。一共三次握手。当到了应用层的时候才算建立了链接,真正收到了客户端发送过来的HTTP请求。

第五步,浏览器解析

浏览器接收到服务器传回的报文,通常是一个html的文本,开始解析其 html。

  • 浏览器并行发起请求去获取 html 所需要的其他静态资源,
  • 并逐行读取 html 标签。
  • 标签和样式一起构成 CSSOM 对象
  • layout 计算每个元素在页面中的位置
  • painting 利用 GPU 完成渲染

中间如果读取到 js 或者其他 css 浏览器都将暂停读取 html,而开始执行并重复上面 3 到 5 的步骤。

到此,你的浏览器就正确的渲染出了页面。

posted @ 2020-04-26 15:16  Ever-Lose  阅读(283)  评论(0编辑  收藏  举报