Article Detail Page

304 Not Modify -- 协商缓存

请求服务器,服务器返回304告诉你,文件没有被修改,让你从缓存里面拿，通过cache-control: no-store 设置过期时间max-age；浏览器会去找服务器对比，服务器决定是否缓存。

强制缓存 cache-control 设置过期时间max-age；

from dist cache 从磁盘里面拿
from memory cache 从内存里面拿

cache-control - expired

明显 cache-contril优先级更高，exipired是http1.0的产物。

几种场景

第一个现象(以图片为例):访问-> 200 -> 退出浏览器再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)总结: 会不会是chrome很聪明的判断既然已经从disk拿来了，第二次就内存拿吧快。（笑哭)
第二个现象(以图片为例):只要图片是base64 我看都是from memroy cache。总结: 解析渲染图片这么费劲的事情，还是做一次然后放到内存吧。用的时候直接拿
第三个现象(以js css为例):个人在做静态测试的发现，大型的js css文件都是直接disk cache总结: chrome会不会说我擦你这么大太JB占地方了。你就去硬盘里呆着吧。慢就慢点吧。
第四个现象:隐私模式下，几乎都是 from memroy cache.总结: 隐私模式是吧。我不能暴露你东西。还是放到内存吧。你关，我死。(终于直到为什么以前开隐私模式看在线小电影会这么卡)

缓存策略

static.pipk.top 静态资源专门为静态资源提供静态资源三级域名，不携带cookie，cache-control： public, max-age=360024365; nginx 添加http字段的方法：

# Expire rules for static content

# cache.appcache, your document html and data
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
  expires -1;
  # access_log logs/static.log; # I don't usually include a static log
}

# Feed
location ~* \.(?:rss|atom)$ {
  expires 1h;
  add_header Cache-Control "public";
}

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
  expires 1y;
  access_log off;
  add_header Cache-Control "public";
}

静态资源属于强制缓存，不需要询问服务器文件对比时间last-modify，是否过期

chat.pipk.top 项目目录负责css+javascript+html文件静态资源加载，负责指向index.html文件，，为何同样是静态资源，要和static.pipk.top区分开来，特么我也不知道哇擦，因为单页面应用有url限制，便于开发。。。。。 html文件的特殊性，决定了她只能强制协商缓存，因为所有资源都是从html文件引入。
api.pipk.top API+Restful 携带cookie

大公司的静态资源缓存策略

配置超长时间的本地缓存 —— 节省带宽，提高性能
采用内容摘要作为缓存更新依据 —— 精确的缓存控制
静态资源CDN部署 —— 优化网络请求
更资源发布路径实现非覆盖式发布 —— 平滑升级

什么是内容摘要算法

截取静态js文件某部分作为MD5加密密钥的一部分，，如果文件被修改那么生成的hash值一定会变化 index.[hash].css

图片压缩算法

最简单的当然是aaaaa === a[5]这种，大家都知道图片由像素点组成，相同像素点可以合并的。这对于早起黑白传真相片特别适用，但是对于现在的彩照肯定不行了。

最后，自己下个nginx 慢慢测试

Reference

nginx - config 前端工程化：体系设计与实践

浏览器中的缓存机制