Web Workers

mls学习小记

已于 2024-02-05 19:02:04 修改

阅读量321

点赞数 4

分类专栏：从0开始学前端前端文章标签：前端

于 2024-02-05 18:56:32 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/136046557

版权

从0开始学前端同时被 2 个专栏收录

81 篇文章 2 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

本文介绍了WebWorkers在JavaScript中的作用，如何在后台线程中执行耗时任务以改善用户体验。详细讲解了其使用场景、创建和通信机制，以及在React项目中的应用实例，包括worker-loader的使用和注意事项。

摘要由CSDN通过智能技术生成

Web Workers

简介

Web Workers允许开发人员运行脚本操作在网页的背景线程中，而不会影响用户界面的响应性。由于JavaScript通常在单个线程上运行，耗时的任务可能会导致用户界面的延迟。通过使用Web Workers，开发人员可以在不同的线程上执行复杂计算，提高应用程序的性能和用户体验。

使用场景

Web Workers适用于以下场景：

大量数据处理，如排序和搜索
复杂数学计算
大文件读取和处理
实时数据处理，如视频或音频流
定时检索更新数据，如股票市场应用

创建和使用Web Workers

要使用Web Workers，首先需要创建一个Worker脚本文件，然后在主线程中实例化该Worker。

Worker Script

创建一个名为worker.js的文件，这将包含在Worker线程中运行的代码。

// worker.js
self.addEventListener('message', function(e) {
    // 在这里执行任何耗时的操作
    const result = performTask(e.data);
    // 发送结果回主线程
    postMessage(result);
});

function performTask(data) {
    // 对data进行处理
    return 'Processed ' + data;
}

主线程

在主线程中，创建一个新的Worker实例，并且通过postMessage方法与之通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker Example</title>
</head>
<body>
    <button id="startWorker">开始任务</button>
    
    <script>
        const worker = new Worker('worker.js');
        
        document.getElementById('startWorker').addEventListener('click', function() {
            worker.postMessage('some data');
        });
        
        worker.addEventListener('message', function(e) {
            console.log('Worker said: ', e.data);
        });
    </script>
</body>
</html>

通信机制

Web Workers使用postMessage方法和onmessage事件处理器进行通信。postMessage可以发送JavaScript对象，这些对象在发送前会被结构化克隆算法（structured clone algorithm）处理，这意味着复杂数据类型如对象和数组也可以被传递。

限制

使用Web Workers时，需要注意以下限制：

Workers内无法访问DOM。
不是所有的全局变量和函数都可以在Worker中使用。
有些浏览器可能对可创建的Workers数量有限制。

最佳实践

只在必要时使用Web Workers，因为过多的线程可能会占用大量内存和处理器资源。
清理不再使用的Workers，以释放资源，可以通过调用terminate()方法。
使用错误处理，监听error事件。
考虑使用池化技术来重用Workers，以节省创建和销毁Workers的开销。

在react中使用webworkers 示例

首先，你需要安装worker-loader：

npm install worker-loader --save-dev

然后，可以在webpack配置文件中添加worker-loader的配置，或者在导入语句中内联使用它：

webpack.config.js（如果你想在配置文件中添加）：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
  // ...
};

现在，你可以创建一个Web Worker文件，并使用.worker.js后缀来命名，以便worker-loader可以处理它：

sort.worker.js：

self.onmessage = function(e) {
  const sortedArray = e.data.sort((a, b) => a - b);
  postMessage(sortedArray);
};

在你的React组件中，你可以像导入其他模块一样导入这个Worker：

App.js：

import React, { useState, useEffect } from 'react';
// 导入Worker
import Worker from './sort.worker.js';

const App = () => {
  const [sortedData, setSortedData] = useState([]);

  useEffect(() => {
    const worker = new Worker();

    worker.onmessage = (e) => {
      setSortedData(e.data);
    };

    // 组件卸载时终止Worker
    return () => {
      worker.terminate();
    };
  }, []);

  const handleSort = () => {
    const largeArray = Array.from({ length: 5000 }, () =>
      Math.floor(Math.random() * 5000)
    );

    // 向Worker发送数据
    worker.postMessage(largeArray);
  };

  return (
    <div>
      <h1>React Web Worker Example</h1>
      <button onClick={handleSort}>Sort Data</button>
      <div>
        Sorted Data:
        {sortedData.map((item, index) => (
          <span key={index}>{item} </span>
        ))}
      </div>
    </div>
  );
};

export default App;

使用worker-loader，你的Web Worker会被Webpack处理并打包到你的应用程序的构建输出中。当你导入Worker时，worker-loader会自动处理Worker的实例化和管理。

注意：在Webpack 5中，worker-loader可能不再是必须的，因为它内置了对Web Workers的支持。你可以使用内置的new Worker(new URL('./worker.js', import.meta.url))语法来代替。

mls学习小记

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Web Workers

Web Workers允许开发人员运行脚本操作在网页的背景线程中，而不会影响用户界面的响应性。由于JavaScript通常在单个线程上运行，耗时的任务可能会导致用户界面的延迟。通过使用Web Workers，开发人员可以在不同的线程上执行复杂计算，提高应用程序的性能和用户体验。
复制链接

扫一扫

专栏目录