(1)无缓存部署
index.html
<link rel="stylesheet" href="a.css" />
<div class="foo">foo</div>
a.css
.foo{
color:red;
}
问题:浪费带宽
(2)304协商缓存
问题:还是要和服务器通信一次
(3)强制本地缓存
<u></u>cache-control/expires
,不要和服务器通信
问题:无法更新资源
(4)通过更新资源的查询参数,更新缓存
index.html
<link rel="stylesheet" href="a.css?v=1.0.0" />
<div class="foo">foo</div>
问题:没有改变的资源也要同时更新
index.html
<link rel="stylesheet" href="a.css?v=1.0.1" />
<link rel="stylesheet" href="b.css?v=1.0.1" />
<link rel="stylesheet" href="c.css?v=1.0.1" />
(5)用数据摘要算法设置查询参数值
index.html
<link rel="stylesheet" href="a.css?v=0abc23" />
<link rel="stylesheet" href="b.css?v=e2fc94" />
<link rel="stylesheet" href="c.css?v=11dbf5" />
问题:包含静态资源的CDN节点,部署顺序问题
index.html
<link rel="stylesheet" href="http://static.xxx.com/a.css?v=0abc23" />
a.css
.foo{
color:red;
}
先部署index.html,
则访问者会请求并缓存旧的a.css,页面错乱,再部署a.css也没有用了
先部署a.css,
有缓存的访问者页面不变,等部署了新index.html,统一更新
没有缓存的访问者会用旧页面加载新样式表,样式错乱,再部署新index.html,恢复正常
(6)采用非覆盖式发布
用数据摘要算法命名文件,新建一个更新的文件。
旧的资源a_0abc23.css,新的资源a_f02bc2.css
部署时,先上传新的资源a_f02bc2.css,再覆盖index.html
问题:该资源被其他资源引用的地址都得相应调整。