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

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 元钱求老司机高手敲几行代码，教一下你当初是怎么解决这个小小问题得
请跟帖发具体解决办法和您的支付宝或者微信得付款账号谢谢了！！！

qgy18

2016-06-05 16:08:55 +08:00

很简单，用 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

2016-06-05 16:18:57 +08:00

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

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

droiz

2016-06-05 16:44:58 +08:00

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

jookr

2016-06-05 18:03:36 +08:00

@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
```
还是不行。。。求具体哪里出错......

mengzhuo

2016-06-06 09:04:37 +08:00

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

qgy18

2016-06-06 10:10:41 +08:00

@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 年工作经历都是技术岗位。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/283642

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

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

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