唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > Html5中应用程序缓存技术-Cache manifest

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

2019-11-03 分类:HTML/CSS 作者:管理员 阅读(851)

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

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

如何使用

1
<html manifest="manifest.appcache">

如何配置

同目录下新建manifest.appcache文件,配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CACHE MANIFEST
# 井号备注,这边可以放版本更新时间,修改备注算更新 manifest 文件
CACHE:
# 首次下载 CACHE 后列出来的文件后缓存到本地。
1.png
/main.css
 
NETWORK:
# NETWORK 下的文件不可被缓存,必须要与服务器连接。
index.php
 
FALLBACK:
# 一行放两个路径,第一个是访问资源,第二个是替补;当无法访问前一个资源时,用后一个资源代替之。
/cat/ /404.html

工作原理

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

小结

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

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

0 条评论关于"Html5中应用程序缓存技术-Cache manifest"

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

  • 江吟辞(1周前 (06-29))

    好难坚持啊,我还没毕业,不知道啥时候才能像您一样厉害

    评:碎言碎语
  • 和我、恋爱吧(1周前 (06-29))

    怎么没见你更新呢,比较忙吗

    评:碎言碎语
  • 游离(1周前 (06-29))

    站主,你好!请教一下,前台的pc 端和移动端,你是怎么实现响应式的呢?媒体查询的同时写两套样...

    评:碎言碎语
  • 권지용(1周前 (06-29))

    最近在学习前端,看了博主很多文章,收益匪浅,感谢大佬

    评:碎言碎语
  • 白君也(1周前 (06-28))

    哇 自己制作的吗 在哪学的技术啊 好厉害

    评:碎言碎语
  • 管理员(3周前 (06-16))

    时间区间问题,因为目前是2020年,你所选不可能超出这个时间吧,当然,代码是根据你的业务来,...

    评:js时间戳完美转换成阴历农历格式

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 258 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 902 条
  • 链接总数: 17 个
  • 标签总数: 459 个
  • 注册用户: 8220 人
  • 访问总量: 9212019 次
  • 最近更新: 2020年7月3日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线