从一个url 地址到最终页面渲染完成,发生了什么?
-
Dns 解析:将域名地址解析为ip 地址
首先读取浏览器dns 缓存,如果没有就去读取系统dns缓存,如果还没有,就接着去读取路由器dns 缓存。如果还是没有,就接着去读取网络运营商dns缓存。
然后再去做递归搜索,比如域名:blog.baidu.com
首先去.com域名下查找dns 解析,然后再去 .baidu域名 下查找dns解析。最后再去blog域名下查找。
如果一直没有找到,就会出错了。
- TCP连接:称为TCP的三次握手。
第一次握手,是由浏览器发起,告诉服务器我要发送请求了
第二次握手,由服务器发起,告诉浏览器我准备接收了,你赶紧发送吧
第三次握手,由浏览器发送,告诉服务器,我发上去了,准备接收吧。
- 发送请求
— 请求报文:HTTP协议的通信内容
- 接收响应
— 接收 响应报文
- 渲染页面
— 遇见html标记,浏览器调用HTML 解析器解析成Token 并构建成dom树。
— 遇见 style / link 标记,浏览器调用css解析器,处理css标记并构建cssom树。
— 遇见script 标记,调用javascript 解析器,处理script 代码(绑定事件,修改dom树 / cssom 树)
— 将 dom 树 和 cssom 树合并成一个渲染树
— 根据渲染树来计算布局,计算每个节点的几何信息(既所谓的布局)。
— 布完局之后,会将各个节点颜色绘制到屏幕上(即渲染)
注:
这五个步骤不一定是按照顺序执行的,有的可能会反复执行多次。如果dom树或cssom 树被修改了,可能会执行多次布局和渲染。往往实际页面中,这些步骤都会执行多次的。
- 断开连接:TCP四次挥手
第一次挥手:由浏览器发起的,发送给服务器,告诉服务器我东西发送完了(即请求报文),你准备关闭吧。
第二次挥手:由服务器发起的,告诉浏览器,请求报文接收完了,我准备关闭了,你也准备吧。
第三次挥手:由服务器发起,告诉浏览器,我东西发送完了(即响应报文),你准备关闭吧。
第四次挥手:由浏览器发起,告诉服务器,我东西接收完了,我准备关闭了(即响应报文),你也准备吧。