说一说从输入URL到页面呈现都发生了什么?
从你在浏览器输出了一串地址开始,到浏览器呈现页面给你,中间一共都经历了什么?
第一步,执行dns解析
- 去chrome浏览器缓存去寻找dns所对应的ip。查看dns:chrome://net-internals/#dns 。
- 去操作系统缓存里寻找ip
- 去本机hosts文件里寻找ip
第二步,询问宽带运营商
如果前三步都获取不到的时候,进入第二步,浏览器去请求宽带运营商提供的dns解析请求。
第三步,准备发送
拿到目标ip后,浏览器某端口发起的HTTP报文经过在传输层(TCP协议)对收到的数据(HTTP请求报文)进行分割,并在各个报文上打上标记序号及端口号后转发给网络层。在网络层(IP协议),增加作为通信目的地的MAC地址后转发给链路层。这样一来,发往网络的通信请求就准备齐全了。
第四步,发起请求
浏览器某端口发起的tcp请求经过层层路由最后到服务器端的网卡,服务器端链路层收到数据后,按照链路层一直到应用层顺序往上发送。一共三次握手。当到了应用层的时候才算建立了链接,真正收到了客户端发送过来的HTTP请求。
第五步,浏览器解析
浏览器接收到服务器传回的报文,通常是一个html的文本,开始解析其 html。
- 浏览器并行发起请求去获取 html 所需要的其他静态资源,
- 并逐行读取 html 标签。
- 标签和样式一起构成 CSSOM 对象
- layout 计算每个元素在页面中的位置
- painting 利用 GPU 完成渲染
中间如果读取到 js 或者其他 css 浏览器都将暂停读取 html,而开始执行并重复上面 3 到 5 的步骤。
到此,你的浏览器就正确的渲染出了页面。