30 元钱求赐教解答一个优化 LAMP 缓存图片的问题

This topic created in 3655 days ago, the information mentioned may be changed or developed.

30 元钱求赐教解答一个优化 LAMP 缓存图片的问题

最终目的效果：
按 F5 刷新浏览器，图片或者 JS 或者 CSS 都直接从浏览取缓存（ Status Code:200 OK (from cache)），而不是 304 （ Status Code:304 Not Modified ）。

效果参照百度图片搜索
```
http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=index&fr=&sf=1&fmq=&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=123&oq=123&rsp=-1
```

```
<img src="1.jpg" />
<link rel="stylesheet" type="text/css" href="2.css">
<script src="3.js"></script>
```

我在 apache 弄那几个 Expires 、 Last-Modified 、 Cache-Control 头都大了
这个问题浪费了我几天时间。
我愚，我笨。国内的搜索引擎国外的 stackoverflow 找了几圈也弄不明白

“钱能解决的问题尽量别花时间”
为了表示对技术的尊重不做伸手党， 30 元钱求老司机高手敲几行代码，教一下你当初是怎么解决这个小小问题得
请跟帖发具体解决办法和您的支付宝或者微信得付款账号谢谢了！！！

CSS

缓存

赐教

script

19 replies • 2016-06-12 17:44:59 +08:00

qgy18

Jun 5, 2016 via iPhone

很简单，用 js 去加载资源。否则就是默认策略：

关于浏览器的刷新（ F5 / cmd + r ）和强刷（ Ctrl + F5 / shift + cmd +r ）：普通刷新会使用协商缓存，忽略强缓存；强刷会忽略浏览器所有缓存（并且请求头会携带 Cache-Control:no-cache 和 Pragma:no-cache ，用来通知所有中间节点忽略缓存）。只有从地址栏或收藏夹输入网址、点击链接等情况下，浏览器才会使用强缓存。

https://imququ.com/post/wpo-of-mobile-web-1.html

jookr

Jun 5, 2016 via iPhone

@qgy18
谢谢再想问具体一点
例如这段代码怎么换成用你说的 js 加载呢？
可以给出具体代码吗？

<img src="1.jpg" />
<link rel="stylesheet" type="text/css" href="2.css">
<script src="3.js"></script>

qgy18

Jun 5, 2016 via iPhone

所以要想做到刷新（ F5 / cmd + r ）依然使用强缓存（ Expires / Cache-Control ），那就需要使用 JS 去加载资源。

qgy18

Jun 5, 2016 via iPhone

@jookr
js 写一个 loader ，最简单的做法是 createElement ，我在外面，打字不方便。你可以玩下我的网站，强刷都可以 js 、 css 做到 200 from cache 。

miao

Jun 5, 2016

200 OK (from cache) 有什么好处?
304 cache 有什么坏处?

droiz

Jun 5, 2016

@miao
200 from cache 说明本地缓存的资源完全可用，根本连请求都不用发，
304 cache 说明浏览器不确定本地缓存资源是否可用，需要请求服务器确认下，服务器要说明本地资源可用，就返回个 304 。 304 虽然还是用的本地缓存资源，但还是发了请求的。 200 from cache 可以节省这些请求。

droiz

Jun 5, 2016

@miao 两者并没有谁好谁坏，只是适用场景不同

tSQghkfhTtQt9mtd

Jun 5, 2016 via Android

@qgy18 你不是 Local storage 呢

miao

Jun 5, 2016

@droiz 明白了. 谢谢解释.

qgy18

Jun 5, 2016 via iPhone

@liwanglin12
打开我的博客中文页，拖到评论区，那个 Disqus 请求没用 localstorage 。

jookr

Jun 5, 2016

@qgy18

```
<html>
<head>
</head>
<body>
<script type="text/javascript">
function addimg(src){
var script = document.createElement('img');
script.setAttribute("src", src);
document.getElementsByTagName('BODY').item(0).appendChild(script);
}
addimg('1.jpg');
addimg('2.jpg');
addimg('3.png');
</script>
</body>
</html>
```

header
```
HTTP/1.1 200 OK
Date: Sun, 05 Jun 2016 10:03:56 GMT
Server: Apache/2.4.18 (Win32) OpenSSL/1.0.2e PHP/5.5.30
Last-Modified: Fri, 22 Apr 2016 10:30:22 GMT
ETag: "8a81-534817e6900f1"
Accept-Ranges: bytes
Content-Length: 35457
Cache-Control: max-age=31536001
Expires: Sat, 22 Apr 2017 10:30:11 GMT
Connection: close
Content-Type: image/jpeg
```
还是不行。。。求具体哪里出错......

qgy18

Jun 5, 2016 via iPhone

@jookr 今天回家太晚没开电脑，明天给你写个 demo

mengzhuo

Jun 6, 2016 via iPhone

@qgy18 数据后端需要完整依赖前端…耦合度这么高有点危险呢。
而且这个 200 from cache 的说法很不严谨，因为根本就没有请求，应该叫静态资源 localstorage 缓存。
降级方案也得考虑。
貌似文章里也没介绍过期资源怎么清理。
算是一个不错的思路，把网站当成 app 了，不管前后端，你是产品出身的么？（ no offence

qgy18

Jun 6, 2016

@mengzhuo
常规的静态资源 localStorage 缓存，并不会产生新的请求， 200 from cache 都不会有。我的方案中利用 SRI 检查了文件内容是否被篡改，把 localStorage 内容取出来使用 Blob URL 引入，所以有 200 from cache 。

这个其实不是本帖关键，有点跑题。我让楼主看的是图片和 Disqus 那个 JS 请求，在刷新主页面后，依然是 200 from cache （就是楼主要的效果）：

关于我这种 localStorage 方案，我们线上产品已经平稳运行了一年多，我们有一整套编译工作流去改写所有需要改写的地方，开发人员无感知。之前我在 v2 也讨论过这个方案：

http://v2ex.com/t/254371

PS ：虽然我平时也关注产品，但我到目前为止的 8 年工作经历都是技术岗位。

qgy18

Jun 6, 2016

@jookr
https://qgy18.com/file/when/all.html

发现之前这个 demo 刚好可以用。你 F5/cmd + r 刷新下， when.js 、图片应该都是 200 from cache 。

jookr

Jun 6, 2016

30 元已转给 qgy18 结贴
谢谢各位

shiny

PRO

Jun 12, 2016

@qgy18 方便透露下您这种技术使用到了什么语言 /库吗？我想实现一遍，不知道用什么比较合适。

qgy18

Jun 12, 2016 via iPhone

@shiny 任何语言都可以啊

shiny

PRO

Jun 12, 2016

@qgy18 有没有现成的轮子比较方便的现实？比如 gulp 之类的。

30 元钱 求赐教解答一个优化 LAMP 缓存图片的问题

30 元钱求赐教解答一个优化 LAMP 缓存图片的问题