如何让前端拥有后端的计算能力？十万、百万条数据都是弟弟，一文彻底了解Web Worker

页面中有十万条数据，对其进行复杂运算，需要多久呢？

表格4000行，25列，总十万条数据

运算包括：总和、算术平均、加权平均、最大、最小、计数、样本标准差、样本方差、中位数、总体标准差、总体方差

答案是: 35s 左右

注：具体时间根据电脑配置会有所不同

并且
这个时间段内，页面一直处于假死状态，对页面做任何操作都没有反应（原地爆炸）

什么是假死？

浏览器有GUI渲染线程与JS引擎线程，这两个线程是互斥的关系。
当js有大量计算时，会造成 UI 阻塞，出现界面渲染卡顿、掉帧等情况，严重时会出现页面卡死的情况，俗称假死

致命bug

强行送测吧

测试小姐姐：你的页面又死了！！
我：还没有死，在ICU…… ，过一会就好了
测试小姐姐：已经等了好一会了，还不行啊，是个致命bug
我：……

闯荡前端数十载，竟被提了个致命bug，颜面何在！

Performance分析假死期间的性能表现

如下图所示： 此次计算总用时为35.45s

重点从以下三个方面分析：

1、FPS:
FPS: 表示每秒传输帧数，是分析动画的一个主要性能指标，绿色的长度越长，用户体验越好；反之红色越长，说明卡顿严重

从图中看到FPS中有一条持续了35s的红线，说明这期间卡顿严重

2、火焰图Main
Main: 表示主线程运行状况，包括js的计算与执行、css样式计算、Layout布局等等。

展开Main,红色倒三角的为Long Task,执行时长50ms就属于长任务，会阻塞页面渲染

从图中看到计算过程的Long Task执行时间为35.45s, 是造成页面假死的原因

3、Summary 统计汇总面板
Summary: 表示各指标时间占用统计报表

• Loading: 加载时间
• Scripting: js计算时间
• Rendering: 渲染时间
• Painting: 绘制时间
• Other: 其他时间
• Idle: 浏览器闲置时间

Scripting代码执行为35.9s

拿什么拯救你，我的页面

召唤Web Worker，出来吧神龙

神龙，我想让页面的计算变快，并且不卡顿

Web Worker了解一下：

在HTML5的新规范中，实现了 Web Worker 来引入 js 的 “多线程” 技术, 可以让我们可以在页面主运行的 js 线程中加载运行另外单独的一个或者多个 js 线程。

一句话： Web Worker专门处理复杂计算的，从此让前端拥有后端的计算能力

在Vue中 使用 Web Worker

1、安装worker-loader
npm install worker-loader

2、编写worker.js

onmessage = function (e) {
  // onmessage获取传入的初始值
  let sum = e.data;
  for (let i = 0; i < 200000; i++) {
    for (let i = 0; i < 10000; i++) {
      sum += Math.random()
    }
  }
  // 将计算的结果传递出去
  postMessage(sum);
}

3、通过行内loader 引入 worker.js
import Worker from “worker-loader!./worker”

4、最终代码

<template>
    <div>
        <button @click="makeWorker">开始线程</button>
        <!--在计算时 往input输入值时 没有发