Html5中应用程序缓存技术-Cache manifest

晴天暖宝宝

于 2022-04-06 23:23:53 发布

阅读量441

点赞数

文章标签： js

本文链接：https://blog.csdn.net/txun123/article/details/124003017

版权

本文介绍了HTML5的离线应用程序缓存(Cachemanifest)技术，用于提升网页加载速度。通过创建manifest.appcache文件，指定要缓存的资源，浏览器将在首次加载时缓存这些资源，之后访问时直接使用本地缓存，减少服务器请求。然而，由于更新不实时和开发者体验不佳，W3C正计划废弃此特性。虽然能优化前端性能，但开发者应谨慎使用。

摘要由CSDN通过智能技术生成

遇到过好几次项目网站打开速度慢需要优化问题，那么在之前我也说过，在你代码写的并非十分稀烂，图片、js、css文件已经压缩情况下，剩下的问题基本都是接口和服务器问题，而前端所能优化占比通常只占30%（个人认为），尽管如此，但如果你在公司里，很多产品经理甚至测试会优先找前端，谁让页面是前端写的呢，没办法这锅不想背都有点难。

前段时间看到一个h5离线应用程序缓存，也就是标题中所说的Cache manifest，下面看下这东西大致能干嘛，基本用法。

如何使用

如何配置

同目录下新建manifest.appcache文件，配置如下：

工作原理

manifest会在首次下载并按文件规则缓存资源，再次载入页面时，便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源，当 manifest 文件更新时，页面加载已经进行，但是缓存更新尚未完成，便会先使用旧 manifest 所缓存的文件，同时浏览器会将新的 manifest 文件里的缓存文件下载下来，若想看到最新的静态资源需要刷新下页面重新加载一次。

小结

这东西固然能再一定程度上让页面加速渲染，但所有缓存技术带来的问题也不言而喻，对开发者相当不友好，比如你改了css或者js，无法及时看到更新效果。并且缓存网站资源的话原本浏览器的缓存机制（304）已经很好了，没必要再使用 manifest 做缓存；实际上因为使用反响并不好，W3C正在废弃manifest。

我喜欢我的懦弱，痛苦和难堪也喜欢。喜欢夏天的光照，风的气息，蝉的鸣叫，喜欢这些，喜欢得不得了。——村上春树《寻羊冒险记》