asm.js & webassembly-WEB high performance computing-JS Tutorial-php.cn

I have introduced WebWorkers-WEB high-performance computing to you before. The knowledge about javascript is very interesting. So today I will tell you about the relationship between asm.js & webassembly and WEB high-performance computing. We have said before that we need to solve it. There are two methods for high-performance computing, one is to use WebWorkers concurrently, and the other is to use a lower-level static language.

In 2012, Mozilla engineer Alon Zakai had a sudden idea when he was studying the LLVM compiler: Can C/C++ be compiled into Javascript and try to achieve the speed of Native code? So he developed the Emscripten compiler, which is used to compile C/C++ code into asm.js, a subset of Javascript. The performance is almost 50% of the native code. You can take a look at this PPT.

Later, Google developed Portable Native Client, which is also a technology that allows browsers to run C/C++ code. Later, I guess everyone felt that it was impossible to do their own thing. Actually, Google, Microsoft, Mozilla, Apple and other major companies worked together to develop a universal binary and text format project for the Web, which is WebAssembly. The introduction on the official website is ：

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

WebAssembly is currently being designed as an open standard by a W3C Community Group that includes representatives from all major browsers.

##So, WebAssembly should be a promising Good project. We can take a look at the current browser support:

asm.js & webassembly-WEB high performance computing

##Install Emscripten

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

1. Download the SDK corresponding to the platform version

2. Get the latest version of the tool through emsdk

# 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

Copy after login

3. Add the following to the environment variable PATH

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

Copy after login

4. Others

I encountered an error when executing It says that the LLVM version is wrong. Later, just refer to the documentation to configure the LLVM_ROOT variable. If you don't encounter any problems, you can ignore it.

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

Copy after login

5. Verify whether the installation is complete

Execute emcc -v. If the installation is successful, the following message will appear:

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)

Copy after login

Hello, WebAssembly!

Create a file hello.c:

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

Copy after login

Compile C/C++ code:

emcc hello.c

Copy after login

The above command will generate an a.out.js file, which we can execute directly with Node.js:

node a.out.js

Copy after login

Output

Hello, WebAssembly!

Copy after login

In order to run the code on the web page, execute the following command Two files, hello.html and hello.js, will be generated. The contents of hello.js and a.out.js are exactly the same.

emcc hello.c -o hello.html<code>
 
➜  webasm-study md5 a.out.js
MD5 (a.out.js) = d7397f44f817526a4d0f94bc85e46429
➜  webasm-study md5 hello.js
MD5 (hello.js) = d7397f44f817526a4d0f94bc85e46429

Copy after login

Then open hello.html in the browser, you can see the page

asm.js & webassembly-WEB high performance computing The code generated in front is all asm.js, after all, Emscripten The author Alon Zakai was the first to use it to generate asm.js. It is not surprising that asm.js is output by default. Of course, wasm can be generated through option, and three files will be generated: hello-wasm.html, hello-wasm.js, hello-wasm.wasm.

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

Copy after login

Then the browser opened hello-wasm.html and found an error TypeError: Failed to fetch. The reason is that the wasm file is loaded asynchronously through XHR, and an error will be reported when accessing it using

file://

//, so we need to start a server.

npm install -g serve
serve

Copy after login

Then visit http://localhost:5000/hello-wasm.html and you will see the normal results.

Calling C/C++ functions

The previous Hello, WebAssembly! are all typed directly by the main function, and the purpose of using WebAssembly is for high-performance computing, which is mostly done in C/ C++ implements a certain function to perform time-consuming calculations, then compiles it into wasm and exposes it to js for calling.

Write the following code in the file 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;
}

Copy after login

There are two ways to expose the add method for js calls.

Exposing API through command line parameters

emcc -s EXPORTED_FUNCTIONS="[&#39;_add&#39;]" add.c -o add.js

Copy after login

Note that _ must be added before the method name add. Then we can use it in Node.js like this:

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

Copy after login

Executing node node-add.js will output 5. If you need to use it on a web page, execute:

emcc -s EXPORTED_FUNCTIONS="[&#39;_add&#39;]" add.c -o add.html

Copy after login

Then add the following code to the generated add.html:

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

Copy after login

Then click the button to see the execution result.

Module.ccall will directly call the C/C++ code method. A more common scenario is that we get a wrapped function that can be called repeatedly in js. This requires using Module.cwrap. The specific details can be See documentation.

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

Copy after login

When defining the function

, add EMSCRIPTEN_KEEPALIVE

Add the file add2.c.

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

Copy after login

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

Copy after login

Execute the command:

emcc add2.c -o add2.html

Copy after login

Also add the code in add2.html:

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

Copy after login

However, when you click the button, an error is reported:

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

Copy after login

可以通过在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;
}

Copy after login

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

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

Copy after login

不过会报一个警告：

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

Copy after login

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

上述生成的代码都是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;
}

Copy after login

注意用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

Copy after login

可以看到有没有优化差别还是很大的，优化过的代码执行时间是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;
}

Copy after login

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

➜  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

Copy after login

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

Copy after login

然后在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(&#39;sum&#39;, &#39;number&#39;, [&#39;number&#39;, &#39;number&#39;], [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

Copy after login

感觉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

Copy after login

居然没什么变化，大失所望。号称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受到各大厂商一致推崇，作为一个新的标准，肯定前景会更好，期待会有更好的表现。

这就是asm.js & webassembly与web高性能计算的关系了，之后还有想法写一份结合Rust做WebAssembly的文章，有兴趣的朋友可以持续关注。

The above is the detailed content of asm.js & webassembly-WEB high performance computing. For more information, please follow other related articles on the PHP Chinese website!