从输入 URL 到页面加载显示完成的过程

前言:“一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?” 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流。

我把这个问题拆解成两个过程:

1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据

2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程)

搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题了。

一. 输入网址到浏览器获得资源的过程

举个例子:

1. 输入网址: 

从输入 URL 到页面加载显示完成的过程

把url分成协议、网络地址、资源路径三部分

协议:从该计算机获取资源的方式,有HTTP、HTTPS、FTP等,不同协议有不同的通讯内容格式

网络地址:指连接网络上的哪一台计算机,可以是域名、IP地址,可以包括端口号。如:“”、“192.168.0.91:8080”

资源路径:指从服务器上获取哪一项资源。如 “/dinghuihua/p/6674719.html”

2. 通过DNS解析获得网址的对应IP地址

当发送一个url请求时,不管这个url是web页面的url还是web页面上的每个资源的url,浏览器都会开启一个线程处理该请求,同时在远程DNS服务器上启动一个DNS查询,这能使浏览器获得请求对应的IP地址

PS: 脑补为啥有DNS这玩意...因为要人类记住辣么多计算机能记住的IP地址怎么可能嘛...它就是起到域名解析的作用的

dns是将域名和IP进行绑定的,通过域名找到互联网上实际的物理地址的服务器,找到这个服务器后,服务器会把请求解析,找到该文件(上下文)后将其推送给浏览器, 浏览器就会把这个html文件通过它自己的浏览器内核定义好的规范解析渲染出来(渲染:呈现元素)

这一步包括DNS的具体查找过程

浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是,操作系统没有告诉浏览器储存DNS记录的时间,这样不同浏览器会储存个自固定的一个时间(2分钟到30分钟不等)。

系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)。这样便可获得系统缓存中的记录。

路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。

ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

3. 浏览器与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接

该握手包括一个“同步报文”,一个“同步-应答报文”和一个“应答报文”,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

4.  浏览器 通过TCP/IP连接 向web服务器 发送一个 HTTP 请求

5. 服务器的永久重定向响应(从 到 )

6. 浏览器跟踪重定向地址

7. 服务器处理请求

8. 服务器返回一个 HTTP 响应

远程服务器找到要请求的资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。

9. 到这里便是浏览器的工作过程了。。。

  浏览器显示 HTML
  浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
  浏览器发送异步请求

二. 浏览器获得资源后到呈现页面的过程

常用的浏览器有很多,有IE、Firefox、Safari、Chrome以及Opera,还有很多国产浏览器,像360浏览器啊这些,它们的存在共同点都是为了让用户看到各种各样的网站,它们不同的是内核的不同,因此可能会给前端工程师们带来一些浏览器的差异性兼容性问题。

* 浏览器主要的功能:通过向服务器请求,来获取你所想要的网络资源,并将它渲染到浏览器窗口中。而资源类型通常是html文件,但也可能是PDF,图片或者是其他类型的资源。

* 浏览器的内核(渲染引擎)有:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxzjg.html