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

Posted 2020-11-27 everlose

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

第一步，执行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 的步骤。

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