·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]什么是 Web Worker?

时间:2014-07-25 17:13酷播
web worker 是运行在后台的 JavaScript,不会影响页面的性能。

什么是 Web Worker?

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

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

检测 Web Worker 支持

在创建 web worker 之前,请检测用户的浏览器是否支持它:

  1. if(typeof(Worker)!=="undefined") 
  2.   { 
  3.   // Yes! Web worker support! 
  4.   // Some code..... 
  5.   } 
  6. else 
  7.   { 
  8.   // Sorry! No Web Worker support.. 
  9.   } 

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:

实例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body> 
  4.  
  5. <p>Count numbers: <output id="result"></output></p> 
  6. <button onclick="startWorker()">Start Worker</button> 
  7. <button onclick="stopWorker()">Stop Worker</button> 
  8. <br /><br /> 
  9.  
  10. <script> 
  11. var w; 
  12.  
  13. function startWorker() 
  14. if(typeof(Worker)!=="undefined") 
  15.   if(typeof(w)=="undefined") 
  16.     { 
  17.     w=new Worker("demo_workers.js"); 
  18.     } 
  19.   w.onmessage = function (event) { 
  20.     document.getElementById("result").innerHTML=event.data; 
  21.   }; 
  22. else 
  23. document.getElementById("result").innerHTML="Sorry, your browser 
  24.  does not support Web Workers..."; 
  25.  
  26. function stopWorker() 
  27. w.terminate(); 
  28. </script> 
  29.  
  30. </body> 
  31. </html> 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器