Réaliser le partage de calcul haute performance frontal

L'un des calculs front-end haute performance : WebWorkers Qu'est-ce que WebWorkers

En termes simples, WebWorkers est une nouvelle API HTML5 à travers laquelle les développeurs Web peuvent s'exécuter l'arrière-plan Un script sans bloquer l'interface utilisateur peut être utilisé pour faire des choses qui nécessitent beaucoup de calculs, en tirant pleinement parti de plusieurs cœurs de processeur.

Fondamentalement, tous les navigateurs prennent désormais en charge les WebWorkers.

Parallel.js

Il est encore trop fastidieux d'utiliser directement l'interface WebWorkers Heureusement, quelqu'un a encapsulé ceci : Parallel.js.

Notez que Parallel.js peut être installé via node :

$ npm install paralleljs

Mais ceci est utilisé sous node.js, en utilisant le module cluster de node. Si vous souhaitez l'utiliser dans le navigateur, vous devez appliquer js directement :

<script src="parallel.js"></script>

et vous pourrez ensuite obtenir une variable globale, Parallel. Parallel fournit deux interfaces de programmation fonctionnelles, mapper et réduire, qui rendent les opérations simultanées très pratiques.

Définissons d'abord notre problème. Puisque l'affaire est relativement complexe, je vais simplifier le problème ici en trouvant la somme de 1 à 1 000 0000, puis en soustrayant 1 à 1 000 0000 à son tour. . La réponse est évidente : 0 ! Ceci est dû au fait que si le nombre est trop grand, il y aura des problèmes d'exactitude des données et les résultats des deux méthodes seront quelque peu différents, ce qui donnera l'impression aux gens que la méthode parallèle n'est pas fiable. Ce problème prend environ 1,5 s si j'exécute simplement js directement sous mon mac pro chrome61 (notre problème commercial réel prend 15 s. Afin d'éviter de tuer le navigateur lors des tests utilisateur, nous avons simplifié le problème).

const N = 100000000;// 总次数1亿

// 更新自2017-10-24 16：47：00
// 代码没有任何含义，纯粹是为了模拟一个耗时计算，直接用
//   for (let i = start; i <= end; i += 1) total += i;
// 有几个问题，一是代码太简单没有任何稍微复杂一点的操作，后面用C代码优化的时候会优化得很夸张，没法对比。
// 二是数据溢出问题， 我懒得处理这个问题，下面代码简单地先加起来，然后再减掉，答案显而易见为0，便于测试。
function sum(start, end) {
  let total = 0;
  for (let i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total += i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total += i / 2;
    }
  }
  for (let i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total -= i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total -= i / 2;
    }
  }

  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;
    });
}

export { N, sum, paraSum }

Le code est relativement simple. Je vais parler ici de quelques pièges que j'ai rencontrés lorsque j'ai commencé à l'utiliser.

exiger toutes les fonctions requises

Par exemple, si sum est utilisé dans le code d'appel, vous devez exiger (somme) à l'avance Si sum utilise une autre fonction f. , vous avez également besoin de require(f). De même, si g est utilisé dans f, vous avez également besoin de require(g) jusqu'à ce que vous ayez besoin de toutes les fonctions définies utilisées. . . .

Ne peut pas exiger de variables

Dans notre code d'appel, j'ai initialement défini N1, mais il ne peut pas être utilisé

Après la compilation d'ES6 dans Problème ES5 et Chrome n'a pas signalé d'erreur

Dans le projet actuel, nous avons initialement utilisé la fonctionnalité d'ES6 : la déstructuration de tableaux. À l'origine, c'était une fonctionnalité très simple, mais maintenant la plupart des navigateurs la prennent en charge. Cependant, le babel que j'ai configuré à ce moment-là sera compilé dans ES5, donc le code _slicedToArray sera généré. Vous pouvez le tester en ligne avec Babel, et il ne le sera jamais. fonctionne sous Chrome. Il n'y a pas eu de message d'erreur. Après une longue vérification, je l'ai ouvert dans Firefox et il y a eu un message d'erreur :

ReferenceError: _slicedToArray is not defined

Il semble que Chrome ne l'est pas. omnipotent. . .

Vous pouvez le tester sur cette page de démonstration. L'augmentation de la vitesse est d'environ 4 fois. Bien sûr, cela dépend toujours du nombre de cœurs du CPU de votre ordinateur. De plus, j'ai ensuite testé Firefox 55.0.3 (64 bits) sur le même ordinateur, et le code d'appel n'a en réalité pris que 190 ms ! ! ! C'est également environ 190 ms sous Safari9.1.1. . .

Réfère

• https://developer.mozilla.org/zh-CN/docs/Web/API/WebWorkersAPI/Usingwebworkers

• https://www.html5rocks.com/en/tutorials/workers/basics/

• https://parallel.js.org/

• https://johnresig.com/blog/web-workers/

• http://javascript.ruanyifeng.com/htmlapi/webworker.html

• http://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications

Calcul haute performance frontal, deuxième partie : asm.js et webassembly

Plus tôt, nous avons parlé de deux méthodes pour résoudre le calcul haute performance, l'une consiste à utiliser WebWorkers simultanément et l'autre consiste à utilisez un langage statique de niveau inférieur.

En 2012, l'ingénieur Mozilla Alon Zakai a eu une idée soudaine alors qu'il étudiait le compilateur LLVM : le C/C++ peut-il être compilé en Javascript et essayer d'atteindre la vitesse du code natif ? Il a donc développé le compilateur Emscripten, qui est utilisé pour compiler du code C/C++ en asm.js, un sous-ensemble de Javascript. Les performances représentent près de 50 % du code natif. Vous pouvez jeter un œil à ce PPT.

Plus tard, Google a développé [Portable Native Client][PNaCI], qui est également une technologie qui permet aux navigateurs d'exécuter du code C/C++. Plus tard, je suppose que tout le monde a senti qu'il était impossible de faire ce qu'il voulait. En fait, Google, Microsoft, Mozilla, Apple et d'autres grandes entreprises ont travaillé ensemble pour développer un projet de format binaire et texte universel pour le Web, qui est WebAssembly. sur le site officiel se trouve :

Citation

WebAssembly ou wasm est un nouveau format portable, efficace en termes de taille et de temps de chargement, adapté à la compilation sur le Web.

Donc , WebAssembly devrait être un projet A avec de bonnes perspectives. Nous pouvons jeter un œil à la prise en charge actuelle du navigateur :

Installer Emscripten

Visitez https://kripken.github.io/emscripten-site/docs /getting_started/downloads.html

1. Téléchargez le SDK correspondant à la version de la plateforme

2 Obtenez la dernière version de l'outil via emsdk

bash
  # Fetch the latest registry of available tools.
  ./emsdk update

  # Download and install the latest SDK tools.
  ./emsdk install latest

  # Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
  ./emsdk activate latest

  # Activate PATH and other environment variables in the current terminal
  source ./emsdk_env.sh

3. 将下列添加到环境变量PATH中

~/emsdk-portable
~/emsdk-portable/clang/fastcomp/build_incoming_64/bin
~/emsdk-portable/emscripten/incoming

 

4. 其他

我在执行的时候碰到报错说LLVM版本不对，后来参考文档配置了LLVM_ROOT变量就好了，如果你没有遇到问题，可以忽略。

LLVM_ROOT = os.path.expanduser(os.getenv('LLVM', '/home/ubuntu/a-path/emscripten-fastcomp/build/bin'))

 

5. 验证是否安装好

执行emcc -v，如果安装好会出现如下信息：

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 1.37.21
clang version 4.0.0 (https://github.com/kripken/emscripten-fastcomp-clang.git 974b55fd84ca447c4297fc3b00cefb6394571d18) (https://github.com/kripken/emscripten-fastcomp.git 9e4ee9a67c3b67239bd1438e31263e2e86653db5) (emscripten 1.37.21 : 1.37.21)
Target: x86_64-apple-darwin15.5.0
Thread model: posix
InstalledDir: /Users/magicly/emsdk-portable/clang/fastcomp/build_incoming_64/bin
INFO:root:(Emscripten: Running sanity checks)

 

Hello, WebAssembly!

创建一个文件hello.c：

#include <stdio.h>
int main() {
  printf("Hello, WebAssembly!\n");
  return 0;
}

 

编译C/C++代码：

emcc hello.c

 

上述命令会生成一个a.out.js文件，我们可以直接用Node.js执行：

node a.out.js

 

输出：

Hello, WebAssembly!

 

为了让代码运行在网页里面，执行下面命令会生成hello.html和hello.js两个文件，其中hello.js和a.out.js内容是完全一样的。

emcc hello.c -o hello.html

 

➜  webasm-study md5 a.out.js
MD5 (a.out.js) = d7397f44f817526a4d0f94bc85e46429
➜  webasm-study md5 hello.js
MD5 (hello.js) = d7397f44f817526a4d0f94bc85e46429

 

然后在浏览器打开hello.html，可以看到页面：；；

前面生成的代码都是asm.js，毕竟Emscripten是人家作者Alon Zakai最早用来生成asm.js的，默认输出asm.js也就不足为奇了。当然，可以通过option生成wasm，会生成三个文件：hello-wasm.html, hello-wasm.js, hello-wasm.wasm。

emcc hello.c -s WASM=1 -o hello-wasm.html

 

然后浏览器打开hello-wasm.html，发现报错TypeError: Failed to fetch。原因是wasm文件是通过XHR异步加载的，用file:////访问会报错，所以我们需要启一个服务器。

npm install -g serve
serve .

 

然后访问http://localhost:5000/hello-wasm.html，就可以看到正常结果了。

调用C/C++函数

前面的Hello, WebAssembly!都是main函数直接打出来的，而我们使用WebAssembly的目的是为了高性能计算，做法多半是用C/C++实现某个函数进行耗时的计算，然后编译成wasm，暴露给js去调用。

在文件add.c中写如下代码：

#include <stdio.h>
int add(int a, int b) {
  return a + b;
}

int main() {
  printf("a + b: %d", add(1, 2));
  return 0;
}

 

有两种方法可以把add方法暴露出来给js调用。

通过命令行参数暴露API

emcc -s EXPORTED_FUNCTIONS="['_add']" add.c -o add.js

 

注意方法名add前必须加_。 然后我们可以在Node.js里面这样使用：

// file node-add.js
const add_module = require('./add.js');
console.log(add_module.ccall('add', 'number', ['number', 'number'], [2, 3]));

 

执行node node-add.js会输出5。如果需要在web页面使用的话，执行：

emcc -s EXPORTED_FUNCTIONS="['_add']" add.c -o add.html

 

然后在生成的add.html中加入如下代码：

<button onclick="nativeAdd()">click</button>
  <script type=&#39;text/javascript&#39;>
    function nativeAdd() {
      const result = Module.ccall('add', 'number', ['number', 'number'], [2, 3]);
      alert(result);
    }
  </script>

 

然后点击button，就可以看到执行结果了。

Module.ccall会直接调用C/C++代码的方法，更通用的场景是我们获取到一个包装过的函数，可以在js里面反复调用，这需要用Module.cwrap，具体细节可以参看 文档 。

const cAdd = add_module.cwrap('add', 'number', ['number', 'number']);
console.log(cAdd(2, 3));
console.log(cAdd(2, 4));

 

定义函数的时候添加EMSCRIPTEN_KEEPALIVE

添加文件add2.c。

#include <stdio.h>
#include <emscripten.h>

int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
  return a + b;
}

int main() {
  printf("a + b: %d", add(1, 2));
  return 0;
}

 

执行命令：

emcc add2.c -o add2.html

 

同样在add2.html中添加代码：

<button onclick="nativeAdd()">click</button>
  <script type=&#39;text/javascript&#39;>
    function nativeAdd() {
      const result = Module.ccall('add', 'number', ['number', 'number'], [2, 3]);
      alert(result);
    }
  </script>

 

但是，当你点击button的时候，报错：

Assertion failed: the runtime was exited (use NO_EXIT_RUNTIME to keep it alive after main() exits)

 

可以通过在main()中添加emscripten_exit_with_live_runtime()解决：

#include <stdio.h>
#include <emscripten.h>

int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
  return a + b;
}

int main() {
  printf("a + b: %d", add(1, 2));
  emscripten_exit_with_live_runtime();
  return 0;
}

 

或者也可以直接在命令行中添加-s NO_EXIT_RUNTIME=1来解决，

emcc add2.c -o add2.js -s NO_EXIT_RUNTIME=1

 

不过会报一个警告：

exit(0) implicitly called by end of main(), but noExitRuntime, so not exiting the runtime (you can use emscripten_force_exit, if you want to force a true shutdown)

 

所以建议采用第一种方法。

上述生成的代码都是asm.js，只需要在编译参数中添加-s WASM=1中就可以生成wasm，然后使用方法都一样。

用asm.js和WebAssembly执行耗时计算

前面准备工作都做完了， 现在我们来试一下用C代码来优化前一篇中提过的问题。代码很简单：

// file sum.c
#include <stdio.h>
// #include <emscripten.h>

long sum(long start, long end) {
  long total = 0;
  for (long i = start; i <= end; i += 3) {
    total += i;
  }
  for (long i = start; i <= end; i += 3) {
    total -= i;
  }
  return total;
}

int main() {
  printf("sum(0, 1000000000): %ld", sum(0, 1000000000));
  // emscripten_exit_with_live_runtime();
  return 0;
}

 

注意用gcc编译的时候需要把跟emscriten相关的两行代码注释掉，否则编译不过。 我们先直接用gcc编译成native code看看代码运行多块呢？

➜  webasm-study gcc sum.c
➜  webasm-study time ./a.out
sum(0, 1000000000): 0./a.out  5.70s user 0.02s system 99% cpu 5.746 total
➜  webasm-study gcc -O1 sum.c
➜  webasm-study time ./a.out
sum(0, 1000000000): 0./a.out  0.00s user 0.00s system 64% cpu 0.003 total
➜  webasm-study gcc -O2 sum.c
➜  webasm-study time ./a.out
sum(0, 1000000000): 0./a.out  0.00s user 0.00s system 64% cpu 0.003 total

 

可以看到有没有优化差别还是很大的，优化过的代码执行时间是3ms!。really？仔细想想，我for循环了10亿次啊，每次for执行大概是两次加法，两次赋值，一次比较，而我总共做了两次for循环，也就是说至少是100亿次操作，而我的mac pro是2.5 GHz Intel Core i7，所以1s应该也就执行25亿次CPU指令操作吧，怎么可能逆天到这种程度，肯定是哪里错了。想起之前看到的 一篇rust测试性能的文章 ，说rust直接在编译的时候算出了答案， 然后把结果直接写到了编译出来的代码里， 不知道gcc是不是也做了类似的事情。在知乎上 GCC中-O1 -O2 -O3 优化的原理是什么？ 这篇文章里， 还真有loop-invariant code motion（LICM）针对for的优化，所以我把代码增加了一些if判断，希望能“糊弄”得了gcc的优化。

#include <stdio.h>
// #include <emscripten.h>

// long EMSCRIPTEN_KEEPALIVE sum(long start, long end) {
long sum(long start, long end) {
  long total = 0;
  for (long i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total += i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total += i / 2;
    }
  }
  for (long i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total -= i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total -= i / 2;
    }
  }
  return total;
}

int main() {
  printf("sum(0, 1000000000): %ld", sum(0, 100000000));
  // emscripten_exit_with_live_runtime();
  return 0;
}

 

执行结果大概要正常一些了。

➜  webasm-study gcc -O2 sum.c
➜  webasm-study time ./a.out
sum(0, 1000000000): 0./a.out  0.32s user 0.00s system 99% cpu 0.324 total

 

ok，我们来编译成asm.js了。

#include <stdio.h>
#include <emscripten.h>

long EMSCRIPTEN_KEEPALIVE sum(long start, long end) {
// long sum(long start, long end) {
  long total = 0;
  for (long i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total += i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total += i / 2;
    }
  }
  for (long i = start; i <= end; i += 1) {
    if (i % 2 == 0 || i % 3 == 1) {
      total -= i;
    } else if (i % 5 == 0 || i % 7 == 1) {
      total -= i / 2;
    }
  }
  return total;
}

int main() {
  printf("sum(0, 1000000000): %ld", sum(0, 100000000));
  emscripten_exit_with_live_runtime();
  return 0;
}

执行：

emcc sum.c -o sum.html

然后在sum.html中添加代码

<button onclick="nativeSum()">NativeSum</button>
  <button onclick="jsSumCalc()">JSSum</button>
  <script type=&#39;text/javascript&#39;>
    function nativeSum() {
      t1 = Date.now();
      const result = Module.ccall('sum', 'number', ['number', 'number'], [0, 100000000]);
      t2 = Date.now();
      console.log(`result: ${result}, cost time: ${t2 - t1}`);
    }
  </script>
  <script type=&#39;text/javascript&#39;>
    function jsSum(start, end) {
      let total = 0;
      for (let i = start; i <= end; i += 1) {
        if (i % 2 == 0 || i % 3 == 1) {
          total += i;
        } else if (i % 5 == 0 || i % 7 == 1) {
          total += i / 2;
        }
      }
      for (let i = start; i <= end; i += 1) {
        if (i % 2 == 0 || i % 3 == 1) {
          total -= i;
        } else if (i % 5 == 0 || i % 7 == 1) {
          total -= i / 2;
        }
      }

      return total;
    }
    function jsSumCalc() {
      const N = 100000000;// 总次数1亿
      t1 = Date.now();
      result = jsSum(0, N);
      t2 = Date.now();
      console.log(`result: ${result}, cost time: ${t2 - t1}`);
    }
  </script>

 

另外，我们修改成编译成WebAssembly看看效果呢？

emcc sum.c -o sum.js -s WASM=1

 

Browser	webassembly	asm.js	js
Chrome61	1300ms	600ms	3300ms
Firefox55	600ms	800ms	700ms
Safari9.1	不支持	2800ms	因不支持ES6我懒得改写没测试

感觉Firefox有点不合理啊， 默认的JS太强了吧。然后觉得webassembly也没有特别强啊，突然发现emcc编译的时候没有指定优化选项-O2。再来一次：

emcc -O2 sum.c -o sum.js # for asm.js
emcc -O2 sum.c -o sum.js -s WASM=1 # for webassembly

 

Browser	webassembly -O2	asm.js -O2	js
Chrome61	1300ms	600ms	3300ms
Firefox55	650ms	630ms	700ms

居然没什么变化， 大失所望。号称asm.js可以达到native的50%速度么，这个倒是好像达到了。但是今年 Compiling for the Web with WebAssembly (Google I/O '17) 里说WebAssembly是1.2x slower than native code，感觉不对呢。 asm.js 还有一个好处是，它就是js，所以即使浏览器不支持，也能当成不同的js执行，只是没有加速效果。当然 WebAssembly 受到各大厂商一致推崇，作为一个新的标准，肯定前景会更好，期待会有更好的表现。

Refers

人工智能是最近两年绝对的热点，而这次人工智能的复兴，有一个很重要的原因就是计算能力的提升，主要依赖于GPU。去年Nvidia的股价飙升了几倍，市面上好点的GPU一般都买不到，因为全被做深度学习以及挖比特币的人买光了

以上内容就是实现前端高性能计算分享，希望能帮助到大家。

相关推荐：

最流行的几个Web前端框架

WebWorkers-前端的高性能计算

web前端知识体系总结

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!