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)
}
相关推荐
sdgsdgdsgc11 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98412 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能