码迷,mamicode.com
首页 > Web开发 > 详细

HTML5应用缓存与Web Workers

时间:2017-03-03 10:50:14      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:没有   man   更新   程序   释放   term   top   return   性能   

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();
 
 

HTML5应用缓存与Web Workers

标签:没有   man   更新   程序   释放   term   top   return   性能   

原文地址:http://www.cnblogs.com/baixuemin/p/6495076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!