JavaScript中的多线程——web worker

最新推荐文章于 2024-08-03 17:05:14 发布

Dormiveglia-flx

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量259

点赞数

分类专栏： HTML5+ES6-ES13+CSS3 文章标签： javascript 前端 ui

本文链接：https://blog.csdn.net/sugerfle/article/details/122144703

版权

HTML5+ES6-ES13+CSS3 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

JavaScript中的多线程——web worker

- 一什么是web worker ，web worker的初体验
- 二 web worker 用法

一什么是web worker ，web worker的初体验

官网：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers

Web Worker 的作用
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Web Worker一旦使用完毕，应该立刻关闭
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

一个demo,用于理解web worker：

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<input type="text" value=""/>
<script>
var w;
function startWorker () {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) === "undefined") {
      //1 创建 web worker
      w = new Worker("demo_workers.js");
    }
     //2 主线程接收子线程的消息，并相应到页面
    w.onmessage = function (event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker () {
  w.terminate();
}
</script>
</body>
</html>

// demo_workers.js
function timedCount () {
  for (var i = 0; i < 10000000000; i++) {
    if (i % 100000 === 0) {
      //3 向主线程发送数据
      postMessage(i);
    }
  }
}

timedCount();

运行结果
在这里插入图片描述

二 web worker 用法

Web Worker 有以下几个使用注意点。

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。（放到服务器上运行，不能直接在本地运行）

用法的demo

//web worker 用法的demo

// 1 新建一个 Worker线程。
var worker = new Worker('work.js');
// 2 主线程给Worker线程传数据
worker.postMessage('Hello World');
// 3 主线程接收worker线程传递的数据
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
}
// 4 任务完成后，关闭worker线程
worker.terminate();


// 1 worker线程接收主线程数据
this.onmessage = function (event) {
  console.log('Received message ' + event.data);
}
// 2 worker线程以消息的方式将结果通知主线程
  this.postMessage(sum);
// 3 关闭worker线程
  this.close();

Dormiveglia-flx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的多线程——web worker

JavaScript中的多线程——web worker一什么是web worker ，web worker的初体验二 web worker 用法一什么是web worker ，web worker的初体验官网：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workersWeb Worker 的作用Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线
复制链接

扫一扫