初入webworker

概念：Web Worker 是一种在浏览器中实现多线程的机制，它允许开发者在主线程之外创建一个或多个子线程来执行任务，从而避免阻塞用户界面。

背景：开发过程中会遇到许多需要同时调起多个接口的页面例如：

1. 处理大量计算或高延迟任务：Web Worker 可以在后台线程中执行费时的处理任务，如复杂的数学计算、图像处理、数据加密等，而不会影响主线程的流畅性。

2. 音视频处理：Web Worker 可以用于处理 WebRTC 视频流录制、视频转码等操作，这些操作通常对 CPU 占用率高，使用 Worker 可以避免界面卡顿。

3. 数据预获取：Web Worker 可用于预先获取或处理数据，如从服务器加载数据或进行本地数据的预处理，以便在需要时快速展示给用户。

4. 前端导出生成文件：例如生成 Excel 文件或进行图片批量压缩等操作，这些操作可以放在 Web Worker 中执行，避免阻塞主线程。

5. 实现轮询机制：Web Worker 可以用于实现服务器状态的轮询，以便在状态发生变化时立即通知主线程。

6. Service Workers：作为 Web Worker 的一种特殊类型，Service Workers 可以拦截网络请求、管理缓存、提供离线体验，并支持推送通知和后台同步。

7. 共享数据：Shared Workers 允许在多个同域页面之间共享数据和状态，适用于需要在多个标签页或 iframe 间同步信息的场景。

8. 避免长时间脚本执行：如果页面中有长时间运行的脚本，这些脚本可以放在 Web Worker 中执行，以避免造成页面卡顿。

开发过程：

注意：webworker是js自带的，不需要npm引入

js代码（worker.js）

self.onmessage = function (e) { //监听主线程发过来的消息
    let length_1 = e.data
    let sum = 0
    for (let i = 0; i <= length_1; i++) {
        sum += i
    }
    self.postMessage(sum); // 将信息发送到主线程上
}

vue页面

 console.time('所用时长1')
    let worker = new Worker("./worker.js"); // 开启副线程
    let length_1 = 300000000;
    let sum1 = 0
    worker.postMessage(length_1); // 发送消息给副线程
    worker.onmessage = e => { // 监听副线程返回的消息
        sum1 = e.data
        console.log('执行完了2：' + e.data, 'color:green')
        console.timeEnd('所用时长3')
        worker.terminate() // 关闭线程
    }
    console.time('所用时长4')
    let length_2 = 200000000;
    let sum2 = 0
    for (let i = 0; i <= length_2; i++) {
        sum2 += i
    }
    console.log('执行完5了：' + sum2, 'color:green')
    console.timeEnd('所用时长6')

js页面是为了进行复杂的操作的， vue页面就是你的主页面