浏览器多线程——web worker

最新推荐文章于 2023-11-29 22:48:57 发布

Novice-XiaoSong

最新推荐文章于 2023-11-29 22:48:57 发布

阅读量2.2k

点赞数 1

分类专栏：前端知识文章标签： web worker 多线程

原文链接：http://www.ruanyifeng.com/blog/2018/07/web-worker.html

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、引入 Web Worker 的原因

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。 这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

二、Web Worker 的使用限制

同源限制

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

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

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

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

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

三、web worker的简单使用

在同一页面中使用<script>作为worker的脚本文件

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <button onclick="createWorker()">创建worker线程并发送消息</button>
    <script id='SCRIPT_worker'>
      // 将作为线程的程序脚本
      self.onmessage = (_e) => {
        console.log('[WORKER] received: ' + _e.data)
        self.postMessage('You said: ' + _e.data)
      }
      setTimeout(() => {
        console.log(self.name)
      }, 1000)
      setTimeout(() => {  // 不会打印，因为3000ms后该线程已经在主线程中被关闭了
          console.log(self.name)
        }, 3000)
    </script>
    <script>
      function createWorker() {
        // 使用<script>作为线程worker_1的脚本
        let blob = new Blob([document.getElementById('SCRIPT_worker').textContent])
        let url = window.URL.createObjectURL(blob)
        let worker = new Worker(url, {name: 'worker_1'})
        worker.onmessage = (_e) => {
          console.log('[MAIN] received: ' + _e.data);
        }
        worker.postMessage('Hello!')
        setTimeout(() => {
          worker.terminate()
        }, 2000)
      }
    </script>
  </body>
</html>

阮一峰Web Worker使用教程

Novice-XiaoSong

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
浏览器多线程——web worker

一、阮一峰Web Worker使用教程阮一峰Web Worker使用教程二、web worker的简单使用在同一页面中使用<script>作为worker的脚本文件<!DOCTYPE html><html> <head></head> <body> <button onclick="createWorker()">创建worker线程并发送消息</button> <
复制链接

扫一扫