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

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

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

遇到过好几次项目网站打开速度慢需要优化问题,那么在之前我也说过,在你代码写的并非十分稀烂,图片、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。

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

赞(0) 打赏

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

支付宝
微信
0

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Html5中应用程序缓存技术-Cache manifest

博客简介

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

精彩评论

友情链接

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

站点统计

  • 文章总数: 242 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 870 条
  • 链接总数: 14 个
  • 标签总数: 432 个
  • 建站时间: 1062 天
  • 注册用户: 3455 人
  • 访问总量: 8667398 次
  • 最近更新: 2019年11月11日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线