[HTML5]Application Cache使用中需要注意的事项

原创 2012年01月31日 16:30:04

之前在分享HTML5中,经常会提到离线缓存--Application Cache,学习的时候只是知其然,并不知其所以然,仅仅是通过文档了解其语法。

这次在手机当当网触屏版的优化中,对于首页当我使用Application Cache的时候,发现几个问题:

 

1. 离线缓存的文件数量是有限制的

 

CACHE MANIFEST
# Version 0.1
# Author: chaichunyan<chaichunyan@dangdang.com>
# Date: 2012-01-31
CACHE:
../js/jquery-1.6.4.min.js
../js/querystring.js
../js/jquery.validate.js
../js/jquery.slides.js
../js/common.js

../css/mobile.css

../images/logo.png
../images/logo_bg.png
../images/shangpinfenlei.png
../images/gouwuche.png
../images/user.png
../images/zhangshangjuesha.png

<后面的缓存文件省略>

  •    
  • Safari桌面浏览器(Mac以及 Windows)没有限制   
  • Mobile Safari限制为10MB   
  • Chrome限制为5MB   
  • Android浏览器对应用程序缓存大小没有限制   
  • Firefox桌面版有无限的应用程序缓存大小   
  • Opera的应用程序缓存大小可以由用户管理,但有一个默认大小50MB

 

 我使用的是Chrome,当超过28个(缓存files大小超过5M)的时候,Application Cache不生效。(一次性超过28个数量以后)

我采用缓存资源逐个添加的方法,当超过28的时候,后面添加的是不在Application Cache缓存列表里的。

 

2. 当使用Application Cache以后,查看网络请求,你会发现网络请求只有你缓存的资源

 

 

这就表示,如果页面你有sever请求的话,和数据库有交互,那么将不能正常显示。

 

分享Malcolm Sherida的Application Cache blog :http://www.sitepoint.com/offline-browsing-in-html5-with-applicationcache/

Webkit关于HTML 5的Application Cache实现之研究

因为工作关系,研究了一段时间的ApplicationCache。首先介绍一下与它相关的SQL DB Table的几个基本概念, CacheGroups : 就是一组资源,例如html...
  • lichwei1983
  • lichwei1983
  • 2015年02月24日 10:59
  • 1853

前端性能优化(Application Cache篇)

之前在segmentfault上刷问题看到一个关于manifest的问题,很好奇就研究了一下application cache。Application Cache是HTML5的新特性,允许浏览器在本地...
  • daimomo000
  • daimomo000
  • 2017年06月07日 09:04
  • 625

HTML5 使用application cache 接口实现离线数据缓存

1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest 文件名称:name.manifest 作用:用于配置需要缓存的文件 2.使用方法 在服务...
  • fdipzone
  • fdipzone
  • 2013年10月15日 00:16
  • 22724

HTML5系列之——applicationCache对象

HTML5离线功能应用
  • laijieyao
  • laijieyao
  • 2014年11月11日 17:51
  • 4851

浏览器探究 - HTML5规范之Application Cache(2)

2.1 Application Cache参考自:Application Cache API2.1.4 applicationCache对象该对象是window对象的直接子对象,window.appl...
  • zhxdick
  • zhxdick
  • 2016年10月09日 11:19
  • 1722

HTML5 使用application cache 接口实现离线数据缓存

1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest 文件名称:name.manifest 作用:用于配置需要缓存的文件 2.使用方法 在服务...
  • fdipzone
  • fdipzone
  • 2013年10月15日 00:16
  • 22724

HTML5 Application Cache 应用程序缓存

  • 2016年08月23日 13:59
  • 328KB
  • 下载

HTML5页面静态资源缓存利器Application Cache

今天写了一个微信推广页,中间为了优化页面加载效果,一堆优化方法中其中之一就用到了Application Cache来对页面部分资源进行静态资源缓存。懒癌复发,今天就不介绍什么是Application ...
  • zhu1500527791
  • zhu1500527791
  • 2016年11月21日 17:26
  • 1970

HTML5 应用缓存,Application Cache

刚学了一个新的东西。发博客分享一下下。 什么是应用程序缓存 HTML5引入了应用程序缓存,这意味着web应用可以进行缓存,并且在没有因特网连接时进行访问。 应用缓存的优势 1:离线浏览-用户可在...
  • wjq_xxq
  • wjq_xxq
  • 2016年12月21日 15:48
  • 454

HTML5离线缓存(Application_Cache)

点击打开链接 HTML5离线缓存(Application Cache) shy丶gril 2016-05-20 14:06:12 浏览321 评论0 Cache appl...
  • bystarlight
  • bystarlight
  • 2017年05月05日 12:27
  • 211
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[HTML5]Application Cache使用中需要注意的事项
举报原因:
原因补充:

(最多只允许输入30个字)