从输入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协议,除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP,之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口,如HTTP默认端口80,HTTPS默认端口443

二、缓存

  说完URL我们说说浏览器缓存,HTTP缓存有多种规则,根据是否需要重新向服务器发起请求来分类,我将其分为强制缓存,对比缓存。

【强制缓存判断HTTP首部字段:cache-control,Expires】:

  • Expires是一个绝对时间,即服务器时间。浏览器检查当前时间,如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题:服务器时间与客户端时间可能不一致。因此该字段已经很少使用。
  • cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200,表示浏览器收到文件后,缓存在484200s内均有效。 如果同时存在cache-control和Expires,浏览器总是优先使用cache-control。

【对比缓存通过HTTP的last-modified,Etag字段进行判断】:

  • last-modified是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。
  • Etag:资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。

在这里插入图片描述

三、DNS域名解析

  我们知道在地址栏输入的域名并不是最后资源所在的真实位置,域名只是与IP地址的一个映射。网络服务器的IP地址那么多,我们不可能去记一串串的数字,因此域名就产生了,域名解析的过程实际是将域名还原为IP地址的过程

1. 首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析。

2. 如果没找到则会查找本地DNS解析器缓存,如果查找到则返回。

3. 如果还是没有找到则会查找本地DNS服务器,如果查找到则返回。

4. 最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到IP地址。或者递归查询,按上一级DNS服务器->上上级->…逐级向上查询找到IP地址。
在这里插入图片描述
在这里插入图片描述

四、TCP连接

  在通过第一步的DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接。

在这里插入图片描述

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

  完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。
在这里插入图片描述

六、浏览器接收响应

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

1xx:指示信息–表示请求已接收,继续处理。

2xx:成功–表示请求已被成功接收、理解、接受。

3xx:重定向–要完成请求必须进行更进一步的操作。

4xx:客户端错误–请求有语法错误或请求无法实现。

5xx:服务器端错误–服务器未能实现合法的请求。

  响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

  响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成。

七、页面渲染

  如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树。
在这里插入图片描述
在这里插入图片描述

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

  通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/daaikuaichuan/article/details/84930987