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)
}
相关推荐
百思可瑞教育17 分钟前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo22 分钟前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo25 分钟前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing1 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登1 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4142 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
xiaopengbc2 小时前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
GISer_Jing2 小时前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
全栈技术负责人2 小时前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http