グランフロントエンド 2015 発表スライド

1. 2015/08/22 グランフロントエンド
asm.jsとWebAssemblyって実際なんなの？
おのうえ (@_likr)
1

2. 自己紹介
✤ おのうえ（イカID: y-likr）
✤ ng-kyoto、GDG Kobeスタッフ
✤ 大学院でWebベース可視化システムの研究・開発
✤ asm.jsでLAPACK移植してみた
https://github.com/likr/emlapack
2

3. はじめに
✤ HTML5周辺技術の発展によってWebが
アプリケーションのプラットフォームとして成熟
✤ 従来Webでできなかったことが徐々にできるように！
✤ 機能不足 → DeviceAPI、WebStorage、WebSocket、…
✤ 性能不足 → asm.js、WebWorker、WebGL、…
ここの話 3

4. 目的
✤ どれだけ速いみたいな話はあんまりしない
✤ asm.jsに対するイメージと現実のギャップを埋めたい
✤ asm.jsでできること / できないこと
✤ asm.jsのコード
4

5. JavaScript高速化が必要な理由
5

6. Webアプリの性能とUX
✤ 優れたUXを実現するために必要な性能の指標RAIL
✤ Response - 100ms
✤ Animation - 16ms (60FPS)
✤ Idle - 50ms
✤ Load - 1000ms
https://developers.google.com/web/tools/profile-performance/evaluate-performance/rail 6

7. フリーランチの終焉
✤ フロントエンド開発への要求は高まる
✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな
いうちに受けていた時代は終わるかもしれない？
✤ フロントエンドエンジニア(JSプログラマ)が
JavaScriptプログラムの速度に負う責任が増す
7

8. JavaScript高速化の三本柱
✤ WebWorker
✤ 処理を並列化する
✤ SIMD.js
✤ データをまとめて処理する
✤ asm.js
✤ 処理速度を上げる
8

9. 性能の階層
ネットワーク
サーバー
Web、DB、アプリ、…
ハードウェア
CPU、GPU、メモリ、…
ブラウザ
JavaScript、レンダリングエンジン、…
JavaScript 80%
JavaScript 20%
レスポンス時間
JavaScript部分を10倍高速化
82
28
高速化対象が全処理時間のどれだけを占める
かを考える必要がある！(アムダールの法則)
100 100
9

10. asm.jsって実際なんなの？
10

11. asm.js
✤ 高速実行のために設計されたJavaScriptのサブセット
✤ ネイティブの少なくても半分程度の性能を目標
✤ Firefox, Chrome, Edge, Node.jsが対応
✤ C/C++からコンパイル(Emscripten)
ゲームエンジンによるサポート(Unreal Engine、Unity)
11

12. asm.jsの対象
✤ 画像、音声、映像の処理
✤ エンコード、デコード
✤ ゲーム
✤ 科学技術計算、可視化
✤ …
12

13. 何もしない関数
function Module(stdlib, foreign, heap) {
“use asm”;
function f() {
}
return {
f: f
};
}
var module = Module();
module.f();
asm.js宣言
関数定義
エクスポート
13

14. 単純な計算をする関数
function Module(stdlib, foreign, heap) {
“use asm”;
var abs = stdlib.Math.abs;
function f(a, b) {
a = +a;
b = +b;
var c = 0.0;
c = +abs(a) + +abs(b);
return c;
}
return {
f: f
};
}
var module = Module(window);
module.f(0.5, -1.2);
グローバル変数
引数の型宣言
ローカル変数宣言
Coercion(戻り値の型宣言)
int: x | 0
double: +x
14

15. Bufferを扱う
heap
x
y
darray
asm.jsモジュール内からのアクセス
asm.jsモジュール外からのアクセス
asm.jsモジュール内外で実体を共有
Heap(ArrayBuffer)をHeap View(TypedArray)を通じて共有する
x[0] === darray[0 >>> 3]
x[1] === darray[8 >>> 3]
…
y[2] === darray[48 >>> 3]
y[3] === darray[56 >>> 3]
int: a[byteOffset >>> 2]
double: a[byteOffset >>> 3]
15

16. function Module(stdlib, foreign, heap) {
“use asm”;
var darray = new stdlib.Float64Array(heap);
function daxpy(n, alpha, x, y) {
n = n | 0;
alpha = +alpha;
x = x | 0;
y = y | 0;
var i = 0, pxi = 0, pyi = 0;
for (i = 0, pxi = x, pyi = y; (i | 0) < (n | 0);
i = i + 1 | 0, pxi = pxi + 8 | 0, pyi = pyi + 8 | 0) {
darray[pyi >> 3] = +darray[pyi >> 3] + alpha * darray[pxi >> 3];
}
}
return {
daxpy: daxpy
};
}
var heap = new ArrayBuffer(64), module = Module(window, null, heap);
var x = new Float64Array(heap, 0, 4), y = new Float64Array(heap, 32, 4);
x.set([1.1, 1.2, 1.3, 1.4]);
y.set([1.5, 1.6. 1.7. 1.8]);
module.daxpy(4, 1.1, x.byteOffset, y.byteOffset) 16

17. asm.jsの不得意なこと
✤ 複雑なデータ構造の操作
✤ Heap上でデータ構造を表現する
コストを回収できるか？
✤ Web APIの呼び出し
✤ foreign経由でのアクセスのみ
17

18. WebAssemblyってなんなの？
18

19. WebAssembly
✤ ブラウザでの実行を想定したバイナリフォーマット
✤ ブラウザベンダー等の協力のもと仕様策定中
✤ https://github.com/WebAssembly/design
✤ Better asm.js
✤ 初期目標としてasm.jsと同等の機能を実現
19

20. WebAssemblyが解決すること
function asmModule($a,$b,$c){
'use asm';
var a=new $a.Int8Array($c);
var b=new $a.Uint8Array($c);
var c=new $a.Int16Array($c);
var d=new $a.Uint16Array($c);
var e=new $a.Int32Array($c);
var f=new $a.Uint32Array($c);
var g=new $a.Float32Array($c);
var h=new $a.Float64Array($c);
var i=$a.Math.imul;
var j=$a.Math.fround;
var $d=$a.Math.acos;
var $e=$a.Math.asin;
var $f=$a.Math.atan;
var $g=$a.Math.cos;
var $h=$a.Math.sin;
var $i=$a.Math.tan;
var $j=$a.Math.exp;
var $k=$a.Math.log;
var $l=$a.Math.ceil;
var $m=$a.Math.floor;
var $n=$a.Math.sqrt;
var $o=$a.Math.abs;
var $p=$a.Math.min;
var $q=$a.Math.max;
var $r=$a.Math.atan2;
var $s=$a.Math.pow;
var $t=$a.Math.clz32;
var $u=$a.NaN;
var $v=$a.Infinity;
function $w(k,l,m){
k=k|0;l=+l;m=j(m);
}
function $x(){
}
function $y(){
}
return {one:$w,two:$x};
}
77 61 73 6d 26 03 00 00 00 00 00 02 03 03 00 02
01 03 00 00 00 00 00 00 00 00 00 03 00 01 01 00
80 00 80 00 80 00 01 02 6f 6e 65 00 00 74 77 6f
00 01
理想
現実コンパイルの
オーバーヘッド
ファイルサイズの増大
による通信量の増加
asm.js WebAssembly
ファイルサイズの縮小
パースの簡略化
減少
増加
20

21. asm.jsとの違い
✤ よりWebと馴染むような仕様
✤ マルチスレッド、SIMDとの統合
✤ GC、DOM、Web APIの操作
✤ 様々な言語からの移植性を高める
✤ ブラウザ以外への組み込みも視野
21

22. WebAssemblyが変えない未来
✤ DOMの呪縛からは解放されない
✤ JavaScriptの実行モデルからは大きく変化しない
✤ プログラミング言語のWebAssembly対応は
別CPUへの移植と同程度のコストがかかる
（たぶん）
22

23. まとめ
23

24. まとめ
✤ asm.jsを効果的に使えば、これまでWebでできなかっ
た種類のアプリケーションが実現できる
✤ WebAssemblyによる順当な進化に期待
✤ なんでも速くなる魔法ではないので、
用法用量を守って正しくお使いください
24