详解浏览器的缓存机制(3)

Html:缓存权限为public;本地缓存到期时间expires为固定Thu, 19 Nov 1981 08:52:00 GMT,也就是本地缓存永远是到期的;因此,每次加载页面都需要重新向源服务器获取资源。

Css:改动频率较低,允许使用本地缓存,且强制缓存时间为1天;强制缓存失效再进行协商缓存;

Js:允许使用本地缓存,且强制缓存时间为1天;强制缓存失效再进行协商缓存;

Image:图片修改频率更低,png格式文件允许使用本地缓存,且强制缓存时间为1周,jpg格式文件为一月; 本地缓存到期后,会继续通过判定Etag和Last-Modified,验证本地缓存的有效性,(方法见3.2,优先级)。图片的缓存策略中,强缓存和协商缓存同时存在,因为页面中一般图片资源较大,但是修改频率较低,所以使用缓存可以提升浏览器加载速度。

4.3 云市场

详解浏览器的缓存机制

注释:

Css:强制缓存时间为1天;强制缓存失效再进行协商缓存;

Js:强制缓存时间为1天;强制缓存失效再进行协商缓存;

Image:强制缓存时间为1周;强制缓存失效再进行协商缓存;

4.4 个人中心

详解浏览器的缓存机制

注释:

Css:强制缓存时间为1天;强制缓存失效再进行协商缓存;

Js:强制缓存时间为1天或1周,不同文件不同;强制缓存失效再进行协商缓存;

Image:强制缓存时间为1周;强制缓存失效再进行协商缓存;

4.5 论坛

详解浏览器的缓存机制

注释:

Css:强制缓存时间为1周;强制缓存失效再进行协商缓存;

Js:强制缓存时间为1周,不同文件不同;强制缓存失效再进行协商缓存;

Image:强制缓存时间为1周;强制缓存失效再进行协商缓存;

4.6 App

移动端缓存策略参考其余部件缓存机制,不另做展示。

总结

在现网页面中,css、js、image等不同类型文件的缓存策略大致相同。即同时存在强缓存和协商缓存策略。对于强缓存,给定本地缓存的有效时间max-age,一般根据不同文件类型的确定max-age大小;对于协商缓存,给定Last-Modified和Etag标识,服务器端验证客户端缓存的有效性。本章中给出了,官网各部件浏览器端缓存策略的简介。但是,部分文件会存在特殊的缓存设置。比如,页面中很多的js、css、image等会添加版本号,强制刷新缓存等。

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

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