• HTML5应用缓存


    HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

    优势

    1、可配置需要缓存的资源
    2、网络无连接应用仍可用
    3、本地读取缓存资源,提升访问速度,增强用户体验
    4、减少请求,缓解服务器负担

    缓存清单

    一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”,路径要保证正确。

    manifest文件格式

    1、顶行写CACHE MANIFEST
    2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
    3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
    4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

    其它

    1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
    2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
    3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存

    <!DOCTYPE html>
    <html lang="en" manifest="study.appcache">
     <!-- study.appcache 引入 缓存清单 -->
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
    </head>
    <body>
     <img src="images/img1.jpg" >
     <img src="images/img2.jpg" >
     <img src="images/img3.jpg" >
     <img src="images/img4.jpg" >
    </body>
    </html>

    study.appcache文件内容如下:

    CACHE MANIFEST
    # 上面必须是第一行 
    CACHE:
    #此部分写需要缓存的资源 (#是注释的意思)
    ./images/img1.jpg
    ./images/img2.jpg
    ./images/img3.jpg
    ./images/img4.jpg
    NETWORK:
    #此部分要写需要有网络才可访问的资源,无网络刚不访问
    ./images/img1.jpg
    ./images/img2.jpg
    #*
    FALLBACK:
    #当访问不到某个资源的情况下,自动由另一个资源替换
    ./images/img4.jpg  ./images/img5.jpg
    别废话,拿你代码给我看。
  • 相关阅读:
    Neutron分析(5)—— neutron-l3-agent中的iptables
    Neutron分析(4)—— neutron-dhcp-agent
    Neutron分析(3)—— neutron-l3-agent
    Neutron分析(2)——neutron-server启动过程分析
    Neutron分析(1)——简介
    RDO部署openstack(3)
    RDO部署openstack(2)
    Peewee之playhouse中的数据库连接池(原创)
    图数据库简介(转)
    RESTful API 最佳实践(转)
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707455.html
Copyright © 2020-2023  润新知