浏览器缓存及优化
Posted HelloHello233
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器缓存及优化相关的知识，希望对你有一定的参考价值。
参考：
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表示版本等等），可以强制更新资源。但这又带来一个问题，被请求的资源往往是在一台专用的资源服务器上的。
发布主服务器和资源服务器必定有一个先后次序。
如果主服务器先更新，则间隔中，用户下载旧的资源，导致以后再也无法更新新的资源了（因为资源的参数是新的）
如果资源服务器先更新。则对于第一次打开的情况，间隔中，用户会下载新的资源，但主页是旧的。可能会导致报错（新的资源跟旧的页面可能不匹配），主服务器更新后，一切都又正常了。
综上，不管更新谁先，都是不恰当的。这就迎来了下面的解决方案
启用强缓存（路径不同，文件以文件的摘要来命名）：这就保证了新的页面必定对应新的资源，而且也不影响旧的页面对旧的资源的访问，也就是说同一个文件的不同版本可能对于短期来说都要保存到资源服务器上。发布的时候先发布资源服务器，再发布主服务器即可。以上命名的过程可以使用工具来实现。
https://jakearchibald.com/2016/caching-best-practices/
特定地址指向的内容从来不发生变化，如果要发生变化，变化应该要反映到地址上（通过构建工具实现），来使浏览器更新缓存：
<script src="/script-f93bca2c.js"></script> <link rel="stylesheet" href="/styles-a837cb1e.css"> <img src="/cats-0e9a2ef4.jpg" alt="…">
然而强缓存不能作用于文章或博客（要求同一地址指向的内容可能经常发生变化，变化后地址不能发生变化），而应该使用协商缓存。但是对于高访问量时，对可变内容指定一个短期（如3分钟）的强缓存可以降低服务器的压力
以上是关于浏览器缓存及优化的主要内容，如果未能解决你的问题，请参考以下文章