[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/

前端性能优化(Application Cache篇)

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

window.applicationCache事件,介绍

window.applicationCache事件,介绍 1.关于applicationCache对象 在IE和Google中 为ApplicationCache对象 而在FF中...
  • p312011150
  • p312011150
  • 2017-06-20 14:25:01
  • 407

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

之前在分享HTML5中,经常会提到离线缓存--Application Cache,学习的时候只是知其然,并不知其所以然,仅仅是通过文档了解其语法。 这次在手机当当网触屏版的优化中,对于首页当我使用A...
  • spring21st
  • spring21st
  • 2012-01-31 16:30:04
  • 3392

HTML一些标签注意事项

最近在IE10下运行一个以前的做web系统发现了两个小问题: 一、图片上使用"alt"属性来添加一些文字提示信息在IE10下无法正常显示出来 上网查了一下原因:原来是现在一些较新的浏览器,比如在I...
  • jiangeeq
  • jiangeeq
  • 2017-04-12 15:55:14
  • 183

缓存使用中的注意事项

达人科技 2016-12-09 08:58 一、缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑,如果从存储层查不到数据则不写入缓存,这将导致这个不...
  • u011277123
  • u011277123
  • 2016-12-12 08:38:15
  • 411

application和cache实现缓存的差异

每个项目都有一些全局,常用的信息,而这些信息如果在每次使用时都载入,那必将耗费很大的资源,特别是对访问压力大的系统。因此,这个情况中,把这些全局信息放到缓存中是很必要的,放在缓存中可以使得数据能够很快...
  • lovelxj
  • lovelxj
  • 2005-08-18 17:22:00
  • 1371

信息安全开发注意事项(四)

会话管理设计漏洞 隐患:由于应用程序设计不当,攻击者窃取到密码、密钥、session tokens等信息 风险:攻击者可以利用会话管理漏洞窃取到密码、会话令牌等信息,进而冒充合法用户身份,获取敏感...
  • jiudihanbing
  • jiudihanbing
  • 2013-12-22 09:11:47
  • 1133

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

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

本地存储之application cache和localstorage

第一部分:Application Cache 1.Application Cache介绍   html5提供的一种应用缓存机制,使得基于web的应用程序可以离线运行。优点有如下几点:   离线浏览:...
  • kingliguo
  • kingliguo
  • 2016-09-23 12:52:08
  • 1635

HTML5 Application Cache

1、应用场景 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口解决了由离线带来的...
  • fwwdn
  • fwwdn
  • 2012-10-17 17:59:53
  • 15706
收藏助手
不良信息举报
您举报文章:[HTML5]Application Cache使用中需要注意的事项
举报原因:
原因补充:

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