您的位置：首页 > Web前端 > HTML5

【面向HTML5--WebWorker】

2017-10-08 17:45 295 查看

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

若Web页面中执行了很耗时的JS任务（如加解密、复杂路径计算、多参数计算等），由于所有的HTML/CSS/JS代码都在同一个UI主线程中执行，会导致页面“卡死”。

根本解决办法：创建一个新的并发线程，在新的线程中执行耗时JS任务，让UI主线程继续渲染页面/监听事件。

if(typeof(Worker)!=="undefined"){//检测浏览器是否支持 WebWorker
var w = new Worker('x.js');   //H5中创建的新“线程”的语句
}else{
// 不支持 WebWorker 的处理语句
}

注意：Worker线程不同于普通线程的天然限制！！！

Worker线程不允许使用任何的BOM和DOM对象！——浏览器只允许UI主线程渲染页面，操作DOM元素！

Worker线程若想从DOM树上读取数据、或把处理结果显示在DOM树上，不能直接操作DOM元素；但可以给UI主线程发消息，让UI主线程来操作。

UI主线程给Worker线程发消息：

UI主线程：
var w = new Worker('x.js');
w.postMessage('stringMsg');
Worker线程：
onmessage = function(e){  e.data  }

Worker线程给UI主线程发消息：

UI主线程：
var w = new Worker('x.js');
w.onmessage = function(e){  e.data }
Worker线程：
postMessage('stringMsg');

终止 Web Worker：

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

//实例
//index.html
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w,
result = document.getElementById("result");
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w) == "undefined"){
w = new Worker("workers.js");
}
w.onmessage = function (event) {
result.innerHTML = event.data;
};
}else{
result.innerHTML = "浏览器不支持WebWorker";
}
}

function stopWorker(){
w.terminate();}
</script>

</body>
</html>

//workers.js
var i=0;

function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航