HTML5新特性——Web Worker

什么是 Web Worker?

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

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

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

浏览器支持

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

示例:

demo_workers.js
View Code
var i=0;



function timedCount()

{

i=i+1;

postMessage(i);

setTimeout("timedCount()",500);

}



timedCount();

demo.html

View 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结构的值也能作为参数传递。

 

你可能感兴趣的:(worker)