从输入 URL 到页面加载完成的过程中都发生了什么

该内容参考地址

过程概述

  • 浏览器查找域名对应的 IP 地址;
  • 浏览器根据 IP 地址与服务器建立 socket 连接;
  • 浏览器与服务器通信: 浏览器请求,服务器处理请求;
  • 浏览器与服务器断开连接。
1、浏览器查找域名对应的 IP 地址
image.png

概念解释

IP 地址:IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码,通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机,想要访问某个服务器,必须先知道它的 IP 地址;
域名( DN ):IP 地址由四个数字组成,中间用点号连接,在使用过程中难记忆且易输入错误,所以用我们熟悉的字母和数字组合来代替纯数字的 IP 地址,比如我们只会记住 www.baidu.com(百度域名) 而不是 220.181.112.244(百度的其中一个 IP 地址);
DNS: 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址。

查找过程
(概述:就像是js的查找机制一样,先从内部开始找,然后延展到外部原型链去查找)

  1. 浏览器搜索自己的 DNS 缓存(维护一张域名与 IP 地址的对应表);

  2. 搜索操作系统中的 DNS 缓存(维护一张域名与 IP 地址的对应表);

  3. 搜索操作系统的 hosts 文件( Windows 环境下,维护一张域名与 IP 地址的对应表);

  4. 操作系统将域名发送至 LDNS(本地区域名服务器,如果你在学校接入互联网,则 LDNS 服务器就在学校,如果通过电信接入互联网,则 LDNS 服务器就在你当地的电信那里。)LDNS 查询 自己的 DNS 缓存(一般查找成功率在 80% 左右),查找成功则返回结果,失败则发起一个迭代 DNS 解析请求;

    1. LDNS 向 Root Name Server (根域名服务器,其虽然没有每个域名的的具体信息,但存储了负责每个域,如 com、net、org等的解析的顶级域名服务器的地址)发起请求,此处,Root Name Server 返回 com 域的顶级域名服务器的地址;

    2. LDNS 向 com 域的顶级域名服务器发起请求,返回 baidu.com 域名服务器地址;

    3. LDNS 向 baidu.com 域名服务器发起请求,得到 www.baidu.com 的 IP 地址;

  5. LDNS 将得到的 IP 地址返回给操作系统,同时自己也将 IP 地址缓存起来;

  6. 操作系统将 IP 地址返回给浏览器,同时自己也将 IP 地址缓存起来;

Fin:至此,浏览器已经得到了域名对应的 IP 地址。

2、浏览器根据 IP 地址与服务器建立 socket 连接;(三次握手)


第一次握手:client向server发送请求连接的报文
第二次握手:server接受连接后回复ack报文
第三次握手:clinet接收ack报文后向server发送ack报文,并分配资源,这tcp连接就建立了。

3、浏览器与服务器通信: 浏览器请求,服务器处理请求;
(概述:浏览器得到数据后对html进行数据渲染)

实现过程:

  1. 浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;
  2. 服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
  3. 服务器将得到的 HTML 文件发送给浏览器;
  4. 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
  5. 在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;
4、浏览器与服务器断开连接(四次握手)

【中断连接端可以是client,也可以是server。毕竟谁都可以叫停。上图为分手需要完成的四次握手】
第一次握手:client向server发送中断链接请求,发送FIN报文。表达:我要跟你分手啦,你还有没有什么话要说,如果还有,就不必急着同意,可以继续说,或者发送数据。
第二次握手:发送ACK。表达:我听到你要跟我分手了,但我心有不忍,我要准备一下。请你等等我。【这个时候,client进入fin_wait状态,继续等待server端的fin报文】
第三次握手:server考虑好了,觉得挽留无意。说完要说的话,为client做完要做的事,向cllient发送FIN报文,告诉client,我话都说完,可以为你做的事也做完,放你自由。我准备关闭自己的连接了。
第四次握手:client收到fin报文后,知道server同意分开,但client不相信网络,怕server不知道要关闭,所以发送ack进入time_wait状态,如果server没有收到ack,会重传。server收到ack后,就真的彻底断开连接了。
cliient发送分手的状态:

server发送分手的状态:


最后

关于三次握手、四次握手可以到这里看一下(戳👇)

推荐阅读更多精彩内容