离线浏览器(如何下载离线网站)


一次性了解浏览器缓存

什么是缓存

缓存一集电视剧,下载一首平时生活中的歌曲;这些资源可以直接离线查看,无需请求网络,并且资源是本地的。

浏览器中的缓存又是什么

如上所述,缓存是离线资源;对于浏览器开发者来说,缓存不是我们用浏览器下载的东西,而是比如我们通过浏览器打开过一个网页,这个网页里面所包含的资源(图片、css文件、js文件等)在无感知的情况下,缓存在了本地;

浏览器中缓存的步骤是什么样的

我们知道浏览器是有缓存的,所以我们每次打开以前打开过的网站,都是用缓存吗?当然不是!浏览器有一套协议来管理什么时候请求服务器,什么时候使用本地缓存;这个协议叫做缓存协议(缓存机制);

让我们来看看这个机制的过程:

随便解释一下这张图:

1.浏览器发送请求检查是否有本地缓存;

2.如果有缓存,判断缓存是否过期;

3.如果过期,将其发送到服务器,以验证当前本地资源是否仍然可用。如果可用,返回状态代码304并使用本地缓存。如果不可用,则返回状态代码200,返回新资源,并将该资源写入缓存。

4.如果没有过期,直接加载缓存资源使用;

打开浏览器开发工具=网络;可以看到下图:

第一个资源是请求返回的新资源。

第二个和第三个是读取内存中的资源,需要0 ms。

后一种是读取本地硬盘中的缓存资源,读取硬盘比较慢,有时间花,但总体上比请求网络快很多;

怎么判断是否有缓存

在第一个请求页面成功返回资源后,每个缓存文件与其url之间的对应关系将被记录并存储在本地。当再次发出下一个请求时,或者浏览器打开后,将使用所请求资源的url来匹配是否有对应的资源;确认此文件是否缓存(此处无法确认文件是否已过期);

怎么判断命中的缓存是否可用

上一步命中缓存资源后,会先检查缓存协议中的相关配置字段(Cache-Control,Expires);检查当前缓存是否已过期并且仍然可用;

缓存控制字段的含义

过期字段

当两个字段都存在时,将忽略过期字段。

如果缓存资源不可用,怎么处理

根据配置,如果发现资源可用,终止请求,返回缓存的资源;当发现它不可用时,它发回一个网络请求,当它被发回时,它回去检查是否有Etag字段和最后修改字段。

1.如果没有找到相关字段,直接发起请求,返回相关资源,并写入缓存;

2.如果找到Etag和Last-Modified字段,附上相应的字段内容,发起请求,服务器会根据你发起的字段内容进行匹配。如果匹配成功,则意味着客户端上的缓存资源仍然可用,并返回304。匹配失败,服务器返回200,携带相应的资源文件;

那么Etag字段和Last-Modified字段又代表什么意思呢?他们的作用又是什么呢?

当资源返回时,这两个字段被请求由报头携带回去。

Etag字段:表示请求资源在服务器的唯一标识,浏览器可以根据ETag值缓存数据,下次请求的时候以If-None-Match字段请求。

Last-Modified字段:用于标记请求资源的最后一次修改时间。请求的时候以If-Modified-Since字段请求

全部过程解析

以下是http缓存可能涉及的所有字段:

国家税务总局