码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器缓存及优化

时间:2017-10-15 14:58:26      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:etag   nbsp   color   log   result   返回   而且   target   end   

参考:

  浏览器缓存知识小结及应用

 chrome61测试:

首页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="2.js"></script>
<body>
</body>
</html>

js

// srv.js
var express = require(‘express‘);
var app = express();

app.get(‘/x‘, function(req, res){
    // res.set("Cache-Control",‘max-age=20000‘);
    res.set("etag",‘adasd‘);
    res.send(‘hello world‘);
});
app.use(express.static(‘./‘,{
    etag:false,
    lastModified:false
}));
app.listen(3000);

//2.js
$.get("/x", function(result){
    console.log(result)
});

测试结果:

  node服务器自动开启协商缓存(以上配置中间件取消了文件的协商缓存)

  对于ajax,可以服务器可以设置对应的头,也可以启动强缓存或者协商缓存,也就是说可以控制ajax的缓存的。这里有一点要注意,如果使用浏览器去访问接口,浏览器会默认带上这样一个头,导致强缓存失效,但使用代码去请求,则没有这个头。

技术分享

  就算是按F5刷新,依然会请求强缓存,而不像文章中说的那样,会跳过强缓存

优化

参考:https://www.zhihu.com/question/20790576

  命中强缓存的话,不会请求服务器。命中协商缓存的话,会有一次请求,但不会返回资源,两个都没命中的话,就只好去服务器拿资源了。

  可以看出对一次发布后,不变的资源设置强缓存,可大大提升效率。

讨论过程如下:

  默认情况下:大部分web服务器开启协商缓存,这不影响资源的更新,缺点是每次都会有一次访问服务器,而且如果资源没有更新的话,都返回304,白白浪费了一次请求。

  启用强缓存(路径相同,带参数):强缓存不会请求服务器,能提升效率,但会导致资源无法及时更新(资源路径名更新前后是相同的)。解决办法,在更新前后使用不同的资源参数(如v=1,v=2表示版本等等),可以强制更新资源。但这又带来一个问题,被请求的资源往往是在一台专用的资源服务器上的。

  发布主服务器和资源服务器必定有一个先后次序。

  如果主服务器先更新,则间隔中,用户下载旧的资源,导致以后再也无法更新新的资源了(因为资源的参数是新的)

  如果资源服务器先更新。则对于第一次打开的情况,间隔中,用户会下载新的资源,但主页是旧的。可能会导致报错(新的资源跟旧的页面可能不匹配),主服务器更新后,一切都又正常了。

  综上,不管更新谁先,都是不恰当的。这就迎来了下面的解决方案

  启用强缓存(路径不同,文件以文件的摘要来命名):这就保证了新的页面必定对应新的资源,而且也不影响旧的页面对旧的资源的访问,也就是说同一个文件的不同版本可能对于短期来说都要保存到资源服务器上。发布的时候先发布资源服务器,再发布主服务器即可。以上命名的过程可以使用工具来实现:

  

浏览器缓存及优化

标签:etag   nbsp   color   log   result   返回   而且   target   end   

原文地址:http://www.cnblogs.com/hellohello/p/7670267.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!