zoukankan      html  css  js  c++  java
  • HTML5应用程序缓存

    使用HTML5,通过创建一个cache manifest文件,可以轻松地创建web应用的离线版本。

    什么是HTML5应用程序缓存?

    自从HTML5引入了应用程序缓存,这意味着web可以进行缓存,可以在没有连接网络的情况下继续访问web.

    应用程序缓存为应用带来了三个优势:

    1、离线浏览-用户可以应用离线时使用它

    2、速度-已缓存资源加载更快

    3、减轻服务器的负载-浏览器只从服务器下载更新过或更改过的文件

    实例:

    <!DOCTYPE html>
    <html manifest="demoIndex.manifest">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"></style>
    <script type="text/javascript" src="Css/jquery-2.1.4.js"></script>
    </head>
    <body>
    <script src="demoTime.js"></script>
    <p id="pid"><button onclick="getTime()">获取日期和时间</button></p>
    <figure>
    <figcaption>HTML5LOGO</figcaption>
    <img src="Images/HTML5LOGO.jpg" alt="html5logo" />
    </figure>
    <p>尝试打开<a href="tryhtml5HtmlManifest.html">这个页面</a>,这个页面在离线的状态下仍然可以打开进行访问。</p>
    </body>
    </html>

    Cache Manifest基础

    如果需要启用应用程序缓存,那么就要在<html>标签中包含manifest属性

    如:<!DOCTYPE html>
    <html manifest="demoIndex.appcache">

    ......

    </html>

    每个指定了manifest属性的页面在用户进行访问时都会被缓存,如果没有指定,则页面不会被缓存,除非在manifest文件中直接指定缓存该页面。

    manifest文件的建议扩展名为.manifest

    请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

  • 相关阅读:
    CSS布局之浮动原理
    img中的alt和title的区别
    重绘+重排+项目优化
    事件冒泡、事件捕获和事件委托
    js数组方法总结
    flex布局
    冒泡排序
    函数节流和函数防抖
    从一个url地址最终到页面渲染完成,发生了什么
    如何让网站变灰
  • 原文地址:https://www.cnblogs.com/melao2006/p/4978787.html
Copyright © 2011-2022 走看看