HTML5 Web Worker

张哥编程

发布于 2024-12-17 02:03:51

9100

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
      //WEB页主线程;
      var worker=new Worker("js/worker.js");
      //创建一个Worker对象，并向它传递将在新线程中;
      worker.postMessage("hello world SB"); //向worker发送数据
      worker.onmessage=function(evt){    //接收Worker传过来的数据函数
        console.log(evt.data);
        alert(evt.data);
      }
      /*检测浏览器是否支持*/
      $(function(){
        if(typeof(Worker)=="undefined"){
          $("#support").html("浏览器不支持HTML5 Web Worker！");
        }else{
          $("#support").html("浏览器支持Html5 Web Worker!"); 
        }       
      });
    </script>
  </head>
  <body>
    <div id="support"></div>
  </body>
</html>

onmessage=function(evt){
  var d=evt.data;
  postMessage(d);
}

worker是一个对象，通过构造函数Worker创建，参数就是一个js文件的路径；文件中的js代码将运行在主线程之外的worker线程；

var jsFileURI = JS_FILE_PATH;  // js文件路径

var worker = new Worker(jsFileURI);

worker运行在另一个全局上下文中（self），这个全局上下文不同于window，所以不能在woker中访问window和DOM；

该线程分为两种：dedicated worker和shared worker；dedicated worker只能被初始化它的js上下文中使用；shared worker可以在多个js上下文中使用。通常使用的worker是dedicated worker，它的工作情况可以通过chrome的调试工具查看。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

html5