HTML5应用缓存与Web Workers

1.什么是应用程序缓存

     HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问。

2.应用缓存的优势

     离线浏览   用户可在应用离线时使用它们

     速度     已缓存资源加载得更快

     减少服务器负载    浏览器将只从服务器下载更新过或更改过的资源

3.实现缓存

     如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性

     manifest文件的建议的文件扩展名是：“.appcache”

4.Manifest文件：

     CACHE MANIFEST   在此标题下列出的文件将在首次下载后进行缓存

     NETWORK     在此标题下列出的文件需要与服务器的链接，且不会被缓存

     FALLBACK     在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

 

<!DOCTYPE html>

<html manifest="index.appcache">

<head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="index.js"></script>

</head>

<body>

     <h1 class="h1">hello world!</h1>

</body>

</html>

 

需要在 .appcache文件里面写

CACHE MANIFEST

 

CACHE:

index.html

style.css

index.js

 

Web Worker

1.什么是Web Worker

     web worker 是运行在后台的JavaScript, 独立于其他脚本 ， 不会影响页面的性能

2.方法

     postMessage() 它用于向HTML页面传回一段消息

     terminate() 终止 web worker , 并释放浏览器/计算机资源

3.事件

     onmessage

 

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>数字累加</title>

    <script src="app.js"></script>

</head>

<body>

    <div id="numDiv">0</div>

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

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

</body>

</html>

 

//app.js

var numDiv;

var work=null;

 

window.onload=function(){

    numDiv=document.getElementById("numDiv");

    document.getElementById("start").onclick=startWorker;

    document.getElementById("stop").onclick=function(){

        if(work){

            work.terminate();

            work=null;

        }

    }

 

}

 

function startWorker(){

    if(work){

        return;

    }

    work= new Worker("count.js");

    work.onmessage=function(e){

        numDiv.innerHTML= e.data;

    }

}

 

//count.js

var countNum=0;

function count(){

    postMessage(countNum);

    countNum++;

    setTimeout(count,1000);

}

count();