2017年10月22日星期日

前端高性能计算之一：WebWorkers

Linuxeden 开源社区 -- caniuse-webworkers

原文出处： magicly

最近做一个项目，里面涉及到在前端做大量计算，直接用 js 跑了一下，大概需要 15s 的时间，也就是用户的浏览器会卡死 15s，这个完全接受不了。

虽说有 V8 这样牛逼的引擎，但大家知道 js 并不适合做 CPU 密集型的计算，一是因为单线程，二是因为动态语言。我们就从这两个突破口入手，首先搞定“单线程”的限制，尝试用 WebWorkers 来加速计算。

什么是 WebWorkers

简单说，WebWorkers 是一个 HTML5 的新 API，web 开发者可以通过此 API 在后台运行一个脚本而不阻塞 UI，可以用来做需要大量计算的事情，充分利用 CPU 多核。

大家可以看看这篇文章介绍 http://ift.tt/2xX54dF 或者对应的中文版。

The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

可以打开这个链接自己体验一下 WebWorkers 的加速效果。

现在浏览器基本都支持 WebWorkers 了。 caniuse-webworkers

Parallel.js

直接使用 WebWorkers 接口还是太繁琐，好在有人已经对此作了封装：Parallel.js。

注意 Parallel.js 可以通过 node 安装：

1

$ npm install paralleljs

不过这个是在 node.js 下用的，用的 node 的 cluster 模块。如果要在浏览器里使用的话，需要直接应用 js:

1

<script src=“parallel.js”></script>

然后可以得到一个全局变量，Parallel。Parallel 提供了 map 和 reduce 两个函数式编程的接口，可以非常方便的进行并发操作。

我们先来定义一下我们的问题，由于业务比较复杂，我这里把问题简化成求 1-1,0000,0000 的和，然后在依次减去 1-1,0000,0000，答案显而易见： 0！这样做是因为数字太大的话会有数据精度的问题，两种方法的结果会有一些差异，会让人觉得并行的方法不可靠。此问题在我的 mac pro chrome61 下直接简单地跑 js 运行的话大概是 1.5s（我们实际业务问题需要 15s，这里为了避免用户测试的时候把浏览器搞死，我们简化了问题）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const N = 100000000;// 总次数 1 亿
function sum(start, end) {
  let total = 0;
  for (let i = start; i<=end; i += 1) total += i;
  for (let i = start; i<=end; i += 1) total -= i;
  return total;
}
function paraSum(N) {
  const N1 = N / 10;//我们分成 10 分，没分分别交给一个 web worker，parallel.js 会根据电脑的 CPU 核数建立适量的 workers
  let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .require(sum);
  return p.map(n => sum((n – 1) * 10000000 + 1, n * 10000000))// 在 parallel.js 里面没法直接应用外部变量 N1
    .reduce(data => {
      const acc = data[0];
      const e = data[1];
      return acc + e;
    });
}

代码比较简单，我这里说几个刚用的时候遇到的坑。

require 所有需要的函数

比如在上诉代码中用到了 sum，你需要提前 require(sum)，如果 sum 中由用到了另一个函数 f，你还需要 require(f)，同样如果 f 中用到了 g，则还需要 require(g)，直到你 require 了所有用到的定义的函数。。。。

没法 require 变量

我们上诉代码我本来定义了 N1，但是没法用

ES6 编译成 ES5 之后的问题以及 Chrome 没报错

实际项目中一开始我们用到了 ES6 的特性：数组解构。本来这是很简单的特性，现在大部分浏览器都已经支持了，不过我当时配置的 babel 会编译成 ES5，所以会生成代码 _slicedToArray，大家可以在线上 Babel 测试，然后 Chrome 下面始终不 work，也没有任何报错信息，查了很久，后来在 Firefox 下打开，有报错信息：

1

ReferenceError: _slicedToArray is not defined

看来 Chrome 也不是万能的啊。。。

大家可以在此 Demo 页面测试，提速大概在 4 倍左右，当然还是得看自己电脑 CPU 的核数。另外我后来在同样的电脑上 Firefox55.0.3（64 位）测试，上诉代码居然只要 190ms！！！在 Safari9.1.1 下也是 190ms 左右。。。

Refers

转自 http://ift.tt/2ipru5a

The post 前端高性能计算之一：WebWorkers appeared first on Linuxeden开源社区.

http://ift.tt/2xXBRPz

Linuxeden Open Source Community

2017年10月22日星期日

前端高性能计算之一：WebWorkers

什么是 WebWorkers

Parallel.js

Refers

没有评论:

发表评论