web worker的介绍和使用(包含使用案例)

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 有自己的生命周期,可以通过事件监听器(如 onmessageonerror)来捕获相关事件。当不再需要一个 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>Documenttitle>
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. 看控制台执行成功
温馨提示:

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

你可能感兴趣的:(前端)