应用缓存及Web Workers

应用缓存

1.优势:
a.离线缓存
b.加载速度
c.减少服务器负载

2.实现
若需要程序缓存,需要在文档<html> 标签中包含manifest属性
manifest文件的建议的文件扩展名:".appcache"

3.Manifest文件:
a.CACHE MANIFEST 在此标题下列出的文件将在首次下载后进行缓存
b.NETWORK 在此标题下列出的文件需要与服务器的链接,且不会呗缓存
c.FALLBACK 在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

Web Worker

1.是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能
2.方法:
postMessage() 用于向HTML页面回传一段消息
terminate() 终止web worker,并释放浏览器、计算机资源
3.事件:
onmessage

webWorker.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="webWorker.js"></script>
</head>
<body>
    <div id="numDiv"></div>
    <button id="start">start</button>
    <button id="stop">stop</button>

</body>
</html>

webWorker.js文件

var numDiv;
var work = null;

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

}

function startWorker(){
    if(work){
        return;
    }
    work = new Worker("count.js");
    work.onmessage = function(e){
        numDiv.innerHTML = e.data;
    }
}
function stopWorker(){
    if(work){
        work.terminate();
        work = null;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容