web worker的介绍和使用（包含使用案例）

2023-12-28 17:27:06
Web Worker 的介绍

Web Workers 是在浏览器中运行 JavaScript 代码的一种机制，它们在主线程之外运行，可以在后台执行一些任务而不阻塞用户界面。Web Workers 使得在浏览器中执行多线程操作成为可能，这有助于提高性能和响应性。

以下是关于 Web Workers 的一些关键概念和用法：

  1. 线程模型： 在传统的浏览器中，JavaScript 是在主线程中运行的，而主线程主要负责处理用户界面和与用户交互的任务。使用 Web Workers 可以创建额外的线程，这些线程在后台运行，独立于主线程。
  2. 独立的全局上下文： 每个 Web Worker 都有自己独立的全局上下文，与主线程中的全局上下文是分离的。这意味着在 Web Worker 中定义的变量和函数不会影响主线程中的环境，反之亦然。
  3. 通信： 主线程和 Web Worker 之间通过消息进行通信。可以使用 postMessage 方法发送消息，并在两者之间建立双向通信。消息传递是通过拷贝而不是共享对象来完成的，确保数据的安全性。
  4. 不能访问 DOM： Web Workers 不能直接访问 DOM，这意味着不能直接操作页面上的元素。它们主要用于处理计算密集型的任务，而不是用户界面的交互。
  5. 网络请求： Web Workers 可以执行异步操作，包括发起网络请求。它们可以执行一些与网络相关的任务而不会阻塞主线程。
  6. 生命周期： Web Workers 有自己的生命周期，可以通过事件监听器（如 onmessage 和 onerror）来捕获相关事件。当不再需要一个 Web Worker 时，可以通过调用 terminate 方法来终止它。
  7. 限制： 由于 Web Workers 在独立的线程中运行，因此它们不能直接访问主线程的变量和函数。通信是通过消息传递实现的，这也导致了一些数据的复制开销。
Web Worker 使用场景

Web Worker 在处理一些耗时的计算、大量数据的处理和其他计算密集型任务方面表现出色，可以提高整体的性能和用户体验。但要注意，它们并不适用于所有的场景，特别是涉及到直接操作 DOM 的情况。

Web Worker的具体使用

文件目录

创建一个webworker 文件夹，下边有三个文件：index.html、index.js、worker.js

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用来引入index.js
    <script src="./index.js"></script>
</body>
</html>
index.js
// idnex.js
// 创建一个新的 Worker
var worker = new Worker('worker.js');

// 向 Worker 发送消息
worker.postMessage(30); // 传递数据，例如计算斐波那契数列的第 30 项

// 监听从 Worker 返回的消息
worker.onmessage = function(event) {
  var result = event.data;
  console.log('Worker 返回的结果：', result);

  // 关闭 Worker
  worker.terminate();
};

// 监听 Worker 的错误信息
worker.onerror = function(error) {
  console.error('Worker 发生错误：', error);
};
worker.js
self.onmessage = function (event){
    let data = event.data

    // 计算斐波那契额数列的结果
    let result = fibonacci(data)

    // 将结果发送回主线程
    self.postMessage(result)
}

// 斐波那契数列
function fibonacci(n){
    return n <= 2 ? n : fibonacci(n-1) + fibonacci(n-2)
}
遇见的问题

在本地直接打开的时候会违反同源策略；

Failed to construct 'Worker': Script at 'file:///E:/study/1.base_study/webworker/worker.js' cannot be accessed from origin 'null'.
    at file:///E:/study/1.base_study/webworker/index.js:4:14
原因
"Script at 'file:///E:/study/1.base_study/webworker/worker.js' cannot be accessed from origin 'null'"，这说明 Worker 脚本的来源是 'file://'，而主线程的来源是 'null'。这是由于在本地文件系统（file://）上运行时会遇到的问题。
解决方式

在本地该文件目录下起了一个本地服务器，解决同源策略的问题

  1. 进入当前文件目录下，即webworker
  2. 执行http-server,（http-server安装：npm install -g http-server）
  3. 执行成功，打开 http://127.0.0.1:8080
  4. 看控制台执行成功
温馨提示：

执行过大的斐波那契数列，时间比较长哦

文章来源:https://blog.csdn.net/qq_45903688/article/details/135271156
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。