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)
}
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法