从输入url到页面加载完成发生了什么

大耗子 2021年02月07日 35次浏览

从输入url到页面加载完成发生了什么

这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度。

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。

3、DNS解析URL对应的IP。

4、根据IP建立TCP连接(三次握手)。

5、HTTP发起请求。

6、服务器处理请求,浏览器接收HTTP响应。

7、渲染页面,构建DOM树。

8、关闭TCP连接(四次挥手)。

URL

我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成:协议名、域名、端口号,这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段,例如:http://codemouse.online/search?keyword=%E9%9D%A2%E8%AF%95。我们最常见的的协议是HTTP协议,除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP,之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口,如HTTP默认端口80,HTTPS默认端口443。也可以显示使用,在域名或者ip后面写上:port即可。例如 http://codemouse.online:10000

缓存

  1. 先判断是否有缓存。没有缓存直接连接服务器,请求资源。
  2. 判断缓存是否过期。没有过期,直接将缓存内容返回给客户端。
  3. 判断Etag标志,此标志在资源内容更新时候会改变。如果已经改变,从服务器获取新资源给客户端即可,否则返回304状态码,转到缓存的页面。
  4. 判断last-modified,此字段存储是的最后一次更新的时间。如果与浏览器发送的if-modified-since字段不一致,说明缓存过期,应该返回新资源给浏览器。
  5. 在判断etag标志为一致后,还要判断if-none-match,如果资源还是一样的,那就还是返回缓存。

last-modified是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。

Etag:资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。

DNS域名解析

域名只是与IP地址的一个映射,域名解析的过程实际是将域名还原为IP地址的过程。
解析流程如下:

  1. 首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析。
  2. 如果没找到则会查找本地DNS解析器缓存,如果查找到则返回。
  3. 如果还是没有找到则会查找本地DNS服务器,如果查找到则返回。
  4. 最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到IP地址。

TCP连接

在通过第一步的DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始三次握手进行连接。

浏览器向服务器发送HTTP请求

HTTP请求包含请求起始行、请求头部、请求主体三部分。

浏览器接收响应

服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码,响应头,响应报文三个部分。

页面渲染

也就是浏览器使用解析器去解析html代码,将东西显示到前端,给用户浏览使用。

关闭TCP连接或继续保持连接

断开连接,进行tcp四次挥手。