HTML5浏览器缓存技术分享
Posted 伽罗太华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5浏览器缓存技术分享相关的知识，希望对你有一定的参考价值。
引子
离线应用雏形：
早在2007年左右，Google公司为了改善IE6，7和早期火狐2之前技术瓶颈推出了Gears浏览器辅助插件。
包含了现在html5的设计思想，将离线应用、SQLite数据库，异步线程，消息推送等做到浏览器Gears插件。
前言
现在我们要讨论的就是在近年来VueJs、ReactJs、AngularJS等前端技术带领下，单页面应用再一次成为潮流后，首次加载1M以上单个js文件的缓存问题。当100M宽带成为家庭宽带标配后，这个问题似乎也不存在，而当我们在网络拥挤或者手机上打开这样的单体应用每多一秒的等待就会引起客户的焦虑。
常用技术：
1. 服务器端设置http header cache时间
2. 通过建立cdn将静态资源文件进行加速
3. 使用HTML5 的离线应用技术AppCache作为离线缓存
AppCache技术介绍
那什么是AppCache呢？
顾名思义，AppCache就是对app内存缓存的方案，具体表现为当请求某个文件时不是从网络获取该文件，而是从本地获取。
AppCache好处
应用程序缓存为应用带来三个优势：
* 离线浏览 - 用户可在应用离线时使用它们
* 速度 - 已缓存资源加载得更快
* 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
浏览器支持
Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.
使用
使用appcache的话，需要在index.html下，也就是项目目录下，新建一个类似于cache.manifest的manifest文件并在index.html下的html标签内新增manifest属性
<html manifest = "cache.manifest">...</html>
总结一下就是在html中引入一个minifest的文件，
该文件声明了哪些文件应该被缓存，哪些文件不会被缓存格式如下
CACHE MANIFEST#v0.11 首次下载后进行缓存的，一般会写版本号CACHE:#需要被缓存的文件js/app.jscss/style.cssNETWORK:#不需要被缓存的文件resourse/logo.pngFALLBACK:# 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，# 比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，# 那么就去访问offline.html。/offline.html
注意点
1.在cache.manifest下应当写明版本号，并且对本文件不做缓存处理，因为如果服务器对离线资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
2.如果服务器资源更新了，那么浏览器会一次性下载所有更新资源，如果下载过程中失败，那么这次所有更新都算是失败的。浏览器还会使用以前的资源。
3.浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
总结
manifest 适用于需要离线运行的应用（定时器，计算器，阅读器等工具）；
而需要经常发布频繁更新的网站，这种离线缓存机制并不适合。
现在的npm build出来的js文件每次发布出来文件名是动态hash文件名，
如何自动编写cache.manifest，将会在下一篇文章中讲解。
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
以上是关于HTML5浏览器缓存技术分享的主要内容，如果未能解决你的问题，请参考以下文章