HTML5新特性——Web Worker

时间：2022-01-18 18:41:44

什么是 Web Worker？

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

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

由此得知：web Worker中的脚本是另外的一个进程,在解决海量数据处理时导致的页面堵塞情况方面具有划时代的意义。

浏览器支持

所有主流浏览器均支持 web worker，除了 IE的一些版本。

示例：

demo_workers.js
HTML5新特性——Web WorkerHTML5新特性——Web WorkerView Code 
var i=0;

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

timedCount();

demo.html

HTML5新特性——Web WorkerHTML5新特性——Web WorkerView Code 
 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <p>计数: <output id="result"></output></p>
 5 <button onclick="startWorker()">开始 Worker</button> 
 6 <button onclick="stopWorker()">停止 Worker</button>
 7 <br /><br />
 8 <script>
 9 var w;
10 function startWorker(){
11     if(typeof(Worker)!=="undefined"){
12       if(typeof(w)=="undefined") {
13           w=new Worker("/example/html5/demo_workers.js");
14       }
15       w.onmessage = function (event) {
16      document.getElementById("result").innerHTML=event.data;
17         };
18       }else{
19       document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
20       }
21 }
22 
23 function stopWorker(){ 
24     w.terminate();
25 }
26 </script>
27 </body>
28 </html>

Web Workers 和 DOM

由于Worker是一个独立的作用域，独立于浏览器之外，只能进行JavaScript核心（ECMAScript）的操作，因此它们无法访问下例 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象

Web Workers 就是让浏览器脚本处理实现多线程的规范，旨在解决海量数据处理时导致的页面堵塞情况。
但Web Worker中的代码无法进行DOM操作。Web Worker目前不能实现跨域脚本。
对Json数据传输支持

JSON结构的值也能作为参数传递。

 

标签：

相关文章