html5当中引入了应用程序缓存,这意味着web应用可以进行缓存,并且可以在没有网络连接的时候进行访问。应用缓存的优势离线浏览,用户可以在">
当前位置:Gxlcms > html代码 > html5应用缓存与WebWorkers的图文详解

html5应用缓存与WebWorkers的图文详解

时间:2021-07-01 10:21:17 帮助过:9人阅读


在http://www.gxlcms.com/wiki/1118.html" target="_blank">html5当中引入了应用程序缓存,这意味着web应用可以进行缓存,并且可以在没有网络连接的时候进行访问。

应用缓存的优势

  • 离线浏览,用户可以在离线的时候浏览已经加载并且缓存好的数据

  • 加快加载速度。

  • 减少服务器负载。

实现用缓存

如果启用应用程序缓存,需要在<html>标签当中包含manifest属性,manifest文件的建议扩展名是:”.appcache”

manifest文件

manifest文件为我们提供了三种缓存的方式:
version n.n :version表示当前manifest的版本,当version发生变化的时候,此时当用户再次加载的时候,会将CACHE标签下列出的所有文件重新下载一次。
- CACHE MANIFEST:在此标题下列出的文件,将在首次下载后进行缓存。
- NETWORK: 在此标题下列出的文件需要与服务器的链接,且不会被缓存。
- FALLBACK: 在此标题下列出的文件,规定访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件*.html /offline.html,例如404页面。

缓存的应用

这里我创建一个web工程,并且新建一个html文件:
index.html

<!DOCTYPE html><html manifest="index.appcache">
  <head>
    <title>index.html</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head> 
  <body>
    <h1>This is my HTML page</h1>
  </body></html>

style.css

@CHARSET "UTF-8";h1 {    color: aqua;}

可以看到这里,我的页面很简单,并且引用了一个style.css样式文件。并且在<html>标签当中,指定了缓存文件index.appcache.
index.appcache 内容如下:

CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css

可以看到,这里我们使用CACHE类型的缓存,表示需要缓存index.html和css/style.css这两个文件。此时打开服务器,浏览该网页,在关闭服务器,会发现该网页同样可以访问,此时按下F12,打开开发者选项,会发现有如下缓存:
这里写图片描述

同时也可以使用NETWORK类型的缓存,来表示那些文件是需要联网下载的,这里我将css/style.css文件写入到NETWORK类型的缓存当中。

CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css

首先需要手动清除一下之前缓存的记录。然后打开服务器,浏览http://localhost:8080/html5cache/index.html,此时显示效果如下:
这里写图片描述
可以看到此时只是缓存了html页面,并没有缓存css/style.css文件,此时关闭服务器,再次刷新该页面,效果如下:
这里写图片描述
可以看到此时,就只是加载了html页面,并么有加载css文件,所以h1标签的字体是默认的。

更新缓存

如果需要更新缓存,比如这里我更改了html中的文字,此时再次访问localhost:8080/html5cache/index.html 的时候,是不会加载最新的页面文字的,这是因为浏览器默认会到缓存中查找,如果缓存中有,则直接从缓存中取出,因此我们需要更新缓存文件”index.appcache”中的version即可,如下:

CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:

这里,我将version更改了1.1,此时再次访问该页面的时候, 是会到服务其下载最新的页面,说到这里,缓存的缺点就出来了,就是哪怕我一个页面中只更新一行文字,但是当我更改了”index.appcache”文件中的version值之后,就会重新将CACHE中定义的所有内容,重新下载一次。

使用js自动更新缓存

另外,我们还可以使用applicationcache对象来自动更新缓存。如下:

<script type="text/javascript">
         //添加页面加载函数
        window.addEventListener('load', function(e) {

          //为applicationCache对象添加updateready事件 
          window.applicationCache.addEventListener('updateready', function(e) {
            //表示manifest中列举的文件已经重新下载并更新成功
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {              
            //使用swapCache()方法更新到应用程序中
              window.applicationCache.swapCache();              
              if (confirm('A new version of this site is available. Load it?')) {                
              //重新加载当前页面
                window.location.reload();

              }

            } else {                //manifest文件没有变化
                console.log("manifest 没有改变");
            }

          }, false);

        }, false);    </script>

applicationcache是window对象的直接子对象,该对象的事件列表如下:
这里写图片描述
status 返回缓存的状态

可选值匹配常量描述
0appCache.UNCACHED未缓存
1appCache.IDLE闲置
2appCache.CHECKING检查中
3appCache.DOWNLOADING下载中
4appCache.UPDATEREADY已更新
5appCache.OBSOLETE失效

方法

方法名匹配常量
update()发起应用程序缓存下载进程
abort()取消正在进行的缓存下载
swapcache()切换成本地最新的缓存环境

web workers

web workers是运行在后台的脚本,独立于其他的脚本,不会影响页面的性能。类似于android开发中的handler。将繁重耗时的计算放到web worker中来实现,然后将处理的结果返回给主UI线程来显示。

web workers方法

  • postMessage() :用于向html页面回传一段消息。

  • terminate() :终止web workers,并且释放计算机资源。

web workers简单实现

下面使用web workers简单实现一数字更新的demo:
新建一个web工程,创建index.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="index.js"></script></head><body>
    <p id="nump">0</p></body></html>

这里在index.html文件当中引入了index.js文件。
index.js

var nump;
window.onload = function(){
    nump = document.getElementById("nump");    var work = new Worker("count.js");
    work.onmessage = function(e) {
        //alert(e.data);
        nump.innerHTML = e.data;
    };
};

可以看到,这里讲更新数据的具体操作,使用Worker来更新,在worker当中加载了count.js文件来做一些耗时,复杂的计算。然后使用worker的onmessage回调方法,将count.js返回的结果重新显示给nump。
count.js

var countNum = 0;function count(){
    postMessage(countNum);//通过postMessage方法将计算结果回传给调用者
    countNum++;
    setTimeout(count,1000);
}
count();

count.js文件比较简单,每隔一秒更新countNum的值,然后回传给调用者,也就是这里的index.js

此时运行效果如下:
这里写图片描述

下面添加一个开始停止的控制按钮:

 <button id="start">start</button>
 <button id="stop">stop</button>

index.js

var nump;var work;
window.onload = function(){
    nump = document.getElementById("nump");    
    var start = document.getElementById("start");    
    var stop = document.getElementById("stop");
    start.onclick = startWorker;
    stop.onclick = stopWorker;

};function startWorker() {
    if (work) { //如果work存在,则直接返回
        return;
    } else {
        work = new Worker("count.js");
        work.onmessage = function(e) {
            nump.innerHTML = e.data;
        };
    }
}function stopWorker() {
    if (work) {//如果worker存在,则终止并且为其重新赋值
        work.terminate();
        work = null;
    }
}

此时运行效果如下:
这里写图片描述

另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线,该属性属于只读属性,会返回boolean类型的值。

if(window.navigator.onLine) {    //在线} else {    //离线}

以上就是 html5应用缓存与Web Workers的图文详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行