学习笔记之web worker

     当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行

当网页运行比较复杂的效果时,网页主线程加载较慢,这时就需要使用web worker。

使用方法:

    postMessage:用于向html页面传回一段消息

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

下面是一个计数代码实例:

    worker.html:

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="worker.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button id="start">start</button>
<button id="stop">stop</button>
</body>
</html>   
 
 
var numDiv;
var work=null;
window.onload = function(){
    numDiv = document.getElementById("numDiv");

    document.getElementById("start").onclick = function(){
        if(work){
            return;
        }
        work = new Worker("count.js");
        work.onmessage = function(e){
            numDiv.innerHTML = e.data;
        }
        document.getElementById("stop").onclick = function(){
            if(work){
                work.terminate();
                work = null;
            }
        }
    }
}

count.js(web worker的主要代码):

/**
 * Created by Administrator on 2015/5/6.
 */
var countnum=0;
function ccount(){
    postMessage(countnum);
    countnum++;
    setTimeout(ccount,1000);
}
ccount();

wKiom1VKQKyiLC9VAADUMUffXy4442.jpg

你可能感兴趣的:(浏览器,计算机,网页,后台运行,影响)