프런트엔드 고성능 컴퓨팅 공유 실현

프런트엔드 고성능 컴퓨팅 중 하나: WebWorkers WebWorkers란

간단히 말하면 WebWorkers는 HTML5의 새로운 API로, 웹 개발자는 이 API를 사용하여 UI를 차단하지 않고 백그라운드에서 스크립트를 실행할 수 있습니다. 필요한 작업을 수행하는 데 사용할 수 있습니다. 계산량이 많은 경우 여러 CPU 코어를 활용하세요.

기본적으로 모든 브라우저는 이제 WebWorkers를 지원합니다.

Parallel.js

WebWorkers 인터페이스를 직접 사용하는 것은 여전히 ​​너무 번거롭습니다. 다행히도 누군가 Parallel.js로 이미 캡슐화했습니다.

Parallel.js는 node를 통해 설치할 수 있습니다.

$ npm install paralleljs

그러나 이는 node.js에서 node의 클러스터 모듈을 사용하여 사용됩니다. 브라우저에서 사용하려면 js를 직접 적용해야 합니다:

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

그런 다음 전역 변수인 Parallel을 얻을 수 있습니다. Parallel은 두 가지 기능적 프로그래밍 인터페이스인 map과 Reduce를 제공하여 동시 작업을 매우 편리하게 만듭니다.

먼저 문제를 정의해 보겠습니다. 사업이 상대적으로 복잡하기 때문에 여기서는 문제를 단순화하여 1~1,000,0000의 합을 구한 다음 1~1,000,0000을 차례로 빼겠습니다. 명백하다: 0 ! 숫자가 너무 크면 데이터 정확성에 문제가 생기고 두 방법의 결과가 다소 달라서 사람들이 병렬 방식을 신뢰할 수 없다고 느낄 수 있기 때문입니다. Mac pro chrome61에서 js를 직접 실행하면 이 문제는 약 1.5초가 걸립니다(실제 비즈니스 문제는 15초가 걸립니다. 사용자 테스트 중에 브라우저가 종료되는 것을 방지하기 위해 문제를 단순화했습니다).

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 }

코드는 비교적 간단합니다. 여기서는 처음 사용했을 때 겪었던 몇 가지 함정에 대해 이야기하겠습니다.

require all 필수 함수

예를 들어 sum이 어필 코드에 사용된다면 sum이 다른 함수 f를 사용하는 경우에도 require(f)를 미리 해야 합니다. if f g를 사용하는 경우 정의된 모든 함수가 사용되도록 요구할 때까지 require(g)도 필요합니다. . . .

변수를 요구할 수 없습니다

저희 어필 코드에는 원래 N1을 정의했는데 사용할 수 없었습니다

ES6를 ES5로 컴파일한 후 Chrome에서 오류가 보고되지 않는 문제

에서 실제 프로젝트에서는 처음에 ES6를 사용했습니다. 기능: 배열 구조 분해. 원래는 아주 간단한 기능이었지만 지금은 대부분의 브라우저에서 지원하지만, 당시 제가 구성한 바벨은 ES5로 컴파일이 되기 때문에 바벨로 온라인에서 테스트할 수는 없을 것입니다. Chrome에서 작동합니다. 오류 메시지가 없었습니다. 오랫동안 확인한 후 Firefox에서 열었더니

ReferenceError: _slicedToArray is not defined

Chrome이 전능하지 않은 것 같습니다. . .

이 데모 페이지에서 테스트할 수 있습니다. 물론 속도 증가는 컴퓨터 CPU의 코어 수에 따라 다릅니다. 또한 나중에 동일한 컴퓨터에서 Firefox 55.0.3(64비트)을 테스트했는데 실제로 항소 코드가 190ms밖에 걸리지 않았습니다! ! ! Safari9.1.1에서도 약 190ms입니다. . .

Refers

• https://developer.mozilla.org/en/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

프런트엔드 고성능 컴퓨팅 2부: asm.js & webassemble

앞서 고성능 컴퓨팅을 해결하는 두 가지 방법에 대해 이야기했는데, 하나는 WebWorkers를 동시에 사용하는 것이고, 다른 하나는 저수준 정적 언어를 사용하는 것입니다.

2012년 Mozilla 엔지니어 Alon Zakai는 LLVM 컴파일러를 연구하던 중 갑자기 아이디어를 얻었습니다. C/C++를 Javascript로 컴파일하여 네이티브 코드의 속도를 달성할 수 있을까? 그래서 그는 C/C++ 코드를 Javascript의 하위 집합인 asm.js로 컴파일하는 데 사용되는 Emscripten 컴파일러를 개발했습니다. 성능은 네이티브 코드의 거의 50%입니다. 이 PPT를 보시면 됩니다.

나중에 Google은 브라우저에서 C/C++ 코드를 실행할 수 있는 기술이기도 한 [Portable Native Client][PNaCI]를 개발했습니다. 나중에는 모두가 자신의 일을 하는 것이 불가능하다고 생각한 것 같습니다. 실제로 Google, Microsoft, Mozilla, Apple 및 기타 주요 회사가 협력하여 웹용 범용 바이너리 및 텍스트 형식 프로젝트를 개발했습니다. 공식 웹사이트는

Quote

WebAssembly 또는 wasm은 웹 컴파일에 적합한 새로운 이식 가능하고 크기 및 로드 시간 효율적인 형식입니다.

그래서 WebAssembly는 전망이 좋은 프로젝트여야 합니다. 현재 브라우저 지원을 살펴볼 수 있습니다:

Emscripten 설치

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

1을 방문하세요. 버전 SDK

2. 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前端知识体系总结

위 내용은 프런트엔드 고성능 컴퓨팅 공유 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!