html5缓存静态资源,web -- 缓存篇 最佳实战 HTML5离线缓存 HTTP缓存

JS，CSS 版本缓存控制， 离线WEB应用(PWA很多不兼容， 遂用Application Cache实现离线缓存)

js，css等静态资源缓存可以在代码里面控制，但是鉴于目前一系列生态来说，早已不是原生js， jQuery直接使用的时候了， 所以本地缓存并不推荐， 因为改动比较多。

然后就是HTTP缓存了， 我们用Expires和Cache-Control, 服务器那边直接控制到max， 就是永久缓存到本地。然后更新的话依靠hash值， 这时候框架基本都已经自动生成好了。

所以后台修改下就可以，附上nginx代码

这时候我们可以看到不管我们怎么刷新， 都不会请求服务器资源，直接读取本地资源。但是我们网络一关闭就无法访问了。

这时候用离线缓存，这里用应用缓存。

应用缓存已经标准废弃了， 新的方案https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

但是不影响我们使用它， 因为主流浏览器都支持。

需要先在html根节点选择appcache清单，假设取这个名字， 我文件就是这样叫的~~

html manifest="cache.appcache"

然后在js选择更新

// CACHE MANIFEST

window.applicationCache.addEventListener('updateready', function () {

if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {

window.applicationCache.swapCache();

window.location.reload();

}

})

然后服务端填写cache.appcache

vi cache.appcache

CACHE MANIFEST

#v: 1.0.0

CACHE:

index.html

NETWORK:

*

然后上传代码， 前端部分完成了。

(把appcache也上传)

这时候去nginx编辑mime.types， 因为manifest的Content-Type必须是text/cache-manifest

(不用nginx的绕过)，添加一条

text/cache-manifest appcache

重启 nginx -s stop & nginx

刷新看一下。

关闭网络也可以打开，跟app一样。

以后更新版本，也需要同步下版本，这样就可以触发上面的js代码了。

Tips:

1.这样就只在有需要的时候才去加载，而不是每一次点击的时候都加载，就跟app只有在更新版本的时候才去下载app包一样

2.做的更鬼畜的就是也控制api，简单点就控制速度，但是这基本没啥用，就跟一般设置缓存只设置几小时几天， 丢，压根没用....， 之前我搞过一个xyios.js可以做到这点，成本小， 好的做法应该是，比如商品属性修改了，这时候才更新api接口。

3.加载DOM时间其实也不能小视，我网站100ms就加载完成了， 但是700ms才dom渲染完成，开始请求api~~

--END--