浏览器缓存控制

kaka 发布于2019-08-06 13:24 / 2893人阅读

摘要：下面的一片文章缓存关于服务器如何控制浏览器缓存哪里资源缓存的有效时间以及如何替换未过期的缓存等过程。推荐配置为了减少提交文件数，采用的文件命名规则

下面的一片文章《HTTP缓存》关于服务器如何控制浏览器缓存哪里资源、缓存的有效时间、以及如何替换未过期的缓存等过程。
https://developers.google.com...
不过该篇文章中有一些点没有详细说，然后其他资料：
1.浏览器是如何判断缓存过期了的
HTTP1.0里定义了eg:Expires,指定该响应的绝对过期时间，eg: Expires: Fri,05 Jul 2015, 05:00:00 GMT；但是如果服务器时间跟客户端时间不一样就尴尬了，于是这种方式后来慢慢被弃用了。
HTTP1.1里定义了Cache-Control，里面有一系列控制缓存的字段，上篇文章也有提，其中max-age用来指定该响应有效的时间，浏览器比较收到该响应的时间与max-age来判断响应是否过期
eg:
Cache-Control:max-age=31536000.
2.服务器如何加ETag 验证令牌以及Last-Modified等
以koa实现为例：

//koastart
var koa = require("koa");
var app = new koa();
// response
app.use(function *(){
  this.body = "Hello World";
  var etag = this.get("ETag");
  console.log("etag:"+etag);
  var date = new Date;
  var hashStr = this.body;
  var hash = require("crypto").createHash("sha1").update(hashStr).digest("base64");
  this.set({
    "Cache-Control":"max-age=120",
    "Etag": hash,
    "Last-Modified": new Date
  });
});

app.listen(3000);

第一次访问之后返回的http头文件中已经写入的相关的信息

第二次发起请求的时候If-None-Match带回Etag给浏览器进行比对，判断是否需要更新缓存。

3.服务器如何给资源文件路径加指纹的
常用指纹生成办法：使用数据摘要要算法对文件求摘要信息，摘要信息与文件内容一一对应，将摘要信息作为文件名（的一部分）或者版本号
文件的hash指纹通常作为前端静态资源实现持久化缓存的方案之一，Webpack提供了两个配置项可供使用：hash和chunkhash.
chunkhash代表的是chunk的hash值,根据具体chunk模块文件的内容计算所得的hash值，所以某个文件的改动只会影响它本身的hash指纹，不会影响其他文件。
推荐webpack配置:

output: {
    path: "./dist/",
    //为了减少提交文件数，采用 ?_v=[chunkhash:8]的文件命名规则
    filename: utils.assetsPath("js/[name].js?_v=[chunkhash:8]"),
    chunkFilename: utils.assetsPath("js/[id].chunk.js?_v=[chunkhash:8]"),
    // filename: utils.assetsPath("js/[name].[chunkhash:8].js"),
    // chunkFilename: utils.assetsPath("js/[id].[chunkhash:8].js")
  }

云服务器 GPU云服务器浏览器缓存清除浏览器缓存 cdn浏览器缓存 webrtc浏览器接收缓存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61883.html

HTTP 缓存的关键路径

摘要：其关键路径如下图所示图缓存关键路径三关键路径之验证缓存浏览器发起一个请求，生成报文，先发送到缓存器，缓存器验证是否有本地缓存，缓存是否过期等，即图的第一条路径，称之为验证缓存。一、证件照场景拍一次证件照麻烦且费钱，因此每次拍的时候我们都会多留几张备用。这就是计算机世界的缓存，在现实世界中的写照。如果某个行为很消耗资源，很麻烦，那在实现它的时候就顺便多保留几份，这种行为就是缓存。特...

Anleb 2019-08-06 13:24 评论0 收藏0
service worker在移动端H5项目的应用

摘要：和的关系不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技术将在安全性能和体验等方面带来渐进式的提升的一种的模式。这里需要注意的是，首次注册线程的页面需要再次加载才会受其控制。 1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技...

cucumber 2019-08-01 18:21 评论0 收藏0
service worker在移动端H5项目的应用

摘要：和的关系不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技术将在安全性能和体验等方面带来渐进式的提升的一种的模式。这里需要注意的是，首次注册线程的页面需要再次加载才会受其控制。 1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术，也不是一个框架，我们可以把她理解为一种模式，一种通过应用一些技...

Tonny 2019-08-21 18:38 评论0 收藏0
Nginx与浏览器缓存

摘要：与浏览器缓存一浏览器对缓存的处理选项控制请求服务器策略是忽略资源的缓存策略的情况下额外强制请求服务器的意思。而节点只针对中的配置会覆盖的配置。Nginx与浏览器缓存一、浏览器对缓存的处理：Internet选项　　★ 控制请求服务器策略：是忽略资源的缓存策略的情况下额外强制请求服务器的意思。　　 ★ 检查存储的页面较新版本　　1.每次访问网页时 ...

jerry 2019-04-23 14:38 评论0 收藏0
浏览器缓存是什么？它的机制又是什么？

摘要：对于浏览器缓存，相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

jsummer 2019-08-06 13:37 评论0 收藏0