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)
}
相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十六天
android·前端·android studio