【面向HTML5--WebWorker】

来源：互联网发布：linux 重启后 svn失效编辑：程序博客网时间：2024/06/06 07:20

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.jsvar i=0;function timedCount(){    i=i+1;    postMessage(i);    setTimeout("timedCount()",500);}timedCount();

阅读全文

0 0