• HTML5 manifest 应用程序缓存的简单实践


    离线存储技术

      HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景;传统还有离线存储技术为Cookie。

      经过实践我们认为localstorage应该存储一些非关键性ajax数据;

      Application Cache用于存储静态资源;

      而cookie只能保存一小段文本(4096字节);所以不能存储大数据,这是cookie与上述缓存技术的差异之一,而因为HTTP是无状态的,服务器为了区分请求是否来源于同一个服务器,需要一个标识字符串,而这个任务就是cookie完成的,这一段文本每次都会在服务器与浏览器之间传递,以验证用户的权限。

      所以Application Cache的应用场景不一样,所以使用也不一致。

    Application Cache的优势

    1. 离线浏览 - 用户可在应用离线时使用它们
    2. 速度 - 已缓存资源加载得更快
    3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

    实践

      1.在 web 服务器中配置正确的  MIME-type 即 text/cache-manifest

        以Apache为例: 在 .htaccess 文件中写入以此规则:    

    AddType text/cache-manifest appcache

      2.创建manifest 文件 通常是 .appcache 为后缀(与以上apache 的 .htaccess 文件配置相关), 它告知浏览器被缓存的内容(以及不缓存的内容)

        

    CACHE MANIFEST
    # version : 2012-02-21 v1.0.0
    #需缓存的 CACHE: cache.html test.css #不需缓存的 NETWORK: nocache.js FALLBACK: # 访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件
    *.html /offline.html a.jpg/b.jpg

      3. 需启用应用程序缓存,则在文档的<html> 标签中包含 manifest 属性即可

       

    <!DOCTYPE html>
    <html lang="en" manifest="cache.appcache">

      

      配置完成后浏览器将有以下缓存动作

      

    更新缓存

      一旦应用被缓存,它就会保持缓存直到发生下列情况:

      • 用户清空浏览器缓存
      • manifest 文件被修改 (即使只是注释,由此,可通过更改注释中的版本号来较为合理地实现)
      • 由程序来更新应用缓存

      一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使修改了服务器上的文件。为了确保浏览器更新缓存,需要更新 manifest 文件。

      浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。

  • 相关阅读:
    推荐下自己的开源框架:DataMapFramework
    真的能无师自通吗?JAVA学习指导系列
    再回首,工作的第一个十年
    2个DataSet中的数据传递问题,请高手们多多指教。
    数据结构小结
    CDQZ_Training 2012524 词编码
    PowerDesigner显示Comment注释
    DDD基本元素
    使用FluorineFx.NET更新FMS中的SharedObject
    如何取消页面缓存
  • 原文地址:https://www.cnblogs.com/lishalom/p/HTML.html
Copyright © 2020-2023  润新知