web-worker 基本使用

Web Workers 是浏览器中的一项技术,它允许在独立的线程中运行 JavaScript 代码,从而避免主线程阻塞。这对于执行长时间运行的计算、处理大量数据或执行其他 CPU 密集型任务非常有用。下面是一个简单的使用 Web Workers 的示例,包括主线程和工作线程的代码。

主线程的代码:

js 复制代码
<!-- 创建一个按钮,点击按钮时启动Web Worker -->
<button onclick="startWebWorker()">启动 Web Worker</button>

<!-- 显示来自Web Worker的消息 -->
<div id="output"></div>

<script>
    // 创建 Web Worker
    let myWorker = new Worker('./worker.js');

    // 处理来自 Web Worker 的消息
    myWorker.onmessage = function (e) {
        document.getElementById('output').textContent = e.data;
    };

    // 启动 Web Worker 的函数
    function startWebWorker() {
        // 向 Web Worker 发送消息
        myWorker.postMessage('我是主线程');
    }
</script>

worker.js 代码如下:

js 复制代码
// worker.js

// 监听来自主线程的消息
onmessage = function (e) {
  // 处理主线程发送的消息
  const messageFromMain = e.data;

  // 向主线程发送消息
  formatJSON(messageFromMain);
};

const formatJSON =  function (date){
  setTimeout((e) =>{
    // 模拟处理大量数据的过程
    postMessage('数据处理完成');
  },2000)
}
相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript