Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2015/08/22 グランフロントエンド
asm.jsとWebAssemblyって実際なんなの?
おのうえ (@_likr)
1
自己紹介
✤ おのうえ(イカID: y-likr)
✤ ng-kyoto、GDG Kobeスタッフ
✤ 大学院でWebベース可視化システムの研究・開発
✤ asm.jsでLAPACK移植してみた

https://github.com/likr...
はじめに
✤ HTML5周辺技術の発展によってWebが

アプリケーションのプラットフォームとして成熟
✤ 従来Webでできなかったことが徐々にできるように!
✤ 機能不足 → DeviceAPI、WebStorage、WebSocket、…
...
目的
✤ どれだけ速いみたいな話はあんまりしない
✤ asm.jsに対するイメージと現実のギャップを埋めたい
✤ asm.jsでできること / できないこと
✤ asm.jsのコード
4
JavaScript高速化が必要な理由
5
Webアプリの性能とUX
✤ 優れたUXを実現するために必要な性能の指標RAIL
✤ Response - 100ms
✤ Animation - 16ms (60FPS)
✤ Idle - 50ms
✤ Load - 1000ms
https...
フリーランチの終焉
✤ フロントエンド開発への要求は高まる
✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな
いうちに受けていた時代は終わるかもしれない?
✤ フロントエンドエンジニア(JSプログラマ)が

JavaScriptプログラム...
JavaScript高速化の三本柱
✤ WebWorker
✤ 処理を並列化する
✤ SIMD.js
✤ データをまとめて処理する
✤ asm.js
✤ 処理速度を上げる
8
性能の階層
ネットワーク
サーバー
Web、DB、アプリ、…
ハードウェア
CPU、GPU、メモリ、…
ブラウザ
JavaScript、レンダリングエンジン、…
JavaScript 80%
JavaScript 20%
レスポンス時間
Jav...
asm.jsって実際なんなの?
10
asm.js
✤ 高速実行のために設計されたJavaScriptのサブセット
✤ ネイティブの少なくても半分程度の性能を目標
✤ Firefox, Chrome, Edge, Node.jsが対応
✤ C/C++からコンパイル(Emscript...
asm.jsの対象
✤ 画像、音声、映像の処理
✤ エンコード、デコード
✤ ゲーム
✤ 科学技術計算、可視化
✤ …
12
何もしない関数
function Module(stdlib, foreign, heap) {
“use asm”;
function f() {
}
return {
f: f
};
}
var module = Module();
mod...
単純な計算をする関数
function Module(stdlib, foreign, heap) {
“use asm”;
var abs = stdlib.Math.abs;
function f(a, b) {
a = +a;
b = +...
Bufferを扱う
heap
x
y
darray
asm.jsモジュール内からのアクセス
asm.jsモジュール外からのアクセス
asm.jsモジュール内外で実体を共有
Heap(ArrayBuffer)をHeap View(TypedArr...
function Module(stdlib, foreign, heap) {
“use asm”;
var darray = new stdlib.Float64Array(heap);
function daxpy(n, alpha, x...
asm.jsの不得意なこと
✤ 複雑なデータ構造の操作
✤ Heap上でデータ構造を表現する

コストを回収できるか?
✤ Web APIの呼び出し
✤ foreign経由でのアクセスのみ
17
WebAssemblyってなんなの?
18
WebAssembly
✤ ブラウザでの実行を想定したバイナリフォーマット
✤ ブラウザベンダー等の協力のもと仕様策定中
✤ https://github.com/WebAssembly/design
✤ Better asm.js
✤ 初期目...
WebAssemblyが解決すること
function asmModule($a,$b,$c){
'use asm';
var a=new $a.Int8Array($c);
var b=new $a.Uint8Array($c);
var c...
asm.jsとの違い
✤ よりWebと馴染むような仕様
✤ マルチスレッド、SIMDとの統合
✤ GC、DOM、Web APIの操作
✤ 様々な言語からの移植性を高める
✤ ブラウザ以外への組み込みも視野
21
WebAssemblyが変えない未来
✤ DOMの呪縛からは解放されない
✤ JavaScriptの実行モデルからは大きく変化しない
✤ プログラミング言語のWebAssembly対応は

別CPUへの移植と同程度のコストがかかる
(たぶん)
...
まとめ
23
まとめ
✤ asm.jsを効果的に使えば、これまでWebでできなかっ
た種類のアプリケーションが実現できる
✤ WebAssemblyによる順当な進化に期待
✤ なんでも速くなる魔法ではないので、

用法用量を守って正しくお使いください
24
Upcoming SlideShare
Loading in …5
×

asm.jsとWebAssemblyって実際なんなの?

10,791 views

Published on

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

Published in: Technology
  • Be the first to comment

asm.jsとWebAssemblyって実際なんなの?

  1. 1. 2015/08/22 グランフロントエンド asm.jsとWebAssemblyって実際なんなの? おのうえ (@_likr) 1
  2. 2. 自己紹介 ✤ おのうえ(イカID: y-likr) ✤ ng-kyoto、GDG Kobeスタッフ ✤ 大学院でWebベース可視化システムの研究・開発 ✤ asm.jsでLAPACK移植してみた
 https://github.com/likr/emlapack 2
  3. 3. はじめに ✤ HTML5周辺技術の発展によってWebが
 アプリケーションのプラットフォームとして成熟 ✤ 従来Webでできなかったことが徐々にできるように! ✤ 機能不足 → DeviceAPI、WebStorage、WebSocket、… ✤ 性能不足 → asm.js、WebWorker、WebGL、… ここの話 3
  4. 4. 目的 ✤ どれだけ速いみたいな話はあんまりしない ✤ asm.jsに対するイメージと現実のギャップを埋めたい ✤ asm.jsでできること / できないこと ✤ asm.jsのコード 4
  5. 5. JavaScript高速化が必要な理由 5
  6. 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. 7. フリーランチの終焉 ✤ フロントエンド開発への要求は高まる ✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな いうちに受けていた時代は終わるかもしれない? ✤ フロントエンドエンジニア(JSプログラマ)が
 JavaScriptプログラムの速度に負う責任が増す 7
  8. 8. JavaScript高速化の三本柱 ✤ WebWorker ✤ 処理を並列化する ✤ SIMD.js ✤ データをまとめて処理する ✤ asm.js ✤ 処理速度を上げる 8
  9. 9. 性能の階層 ネットワーク サーバー Web、DB、アプリ、… ハードウェア CPU、GPU、メモリ、… ブラウザ JavaScript、レンダリングエンジン、… JavaScript 80% JavaScript 20% レスポンス時間 JavaScript部分を10倍高速化 82 28 高速化対象が全処理時間のどれだけを占める かを考える必要がある!(アムダールの法則) 100 100 9
  10. 10. asm.jsって実際なんなの? 10
  11. 11. asm.js ✤ 高速実行のために設計されたJavaScriptのサブセット ✤ ネイティブの少なくても半分程度の性能を目標 ✤ Firefox, Chrome, Edge, Node.jsが対応 ✤ C/C++からコンパイル(Emscripten)
 ゲームエンジンによるサポート(Unreal Engine、Unity) 11
  12. 12. asm.jsの対象 ✤ 画像、音声、映像の処理 ✤ エンコード、デコード ✤ ゲーム ✤ 科学技術計算、可視化 ✤ … 12
  13. 13. 何もしない関数 function Module(stdlib, foreign, heap) { “use asm”; function f() { } return { f: f }; } var module = Module(); module.f(); asm.js宣言 関数定義 エクスポート 13
  14. 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. 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. 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. 17. asm.jsの不得意なこと ✤ 複雑なデータ構造の操作 ✤ Heap上でデータ構造を表現する
 コストを回収できるか? ✤ Web APIの呼び出し ✤ foreign経由でのアクセスのみ 17
  18. 18. WebAssemblyってなんなの? 18
  19. 19. WebAssembly ✤ ブラウザでの実行を想定したバイナリフォーマット ✤ ブラウザベンダー等の協力のもと仕様策定中 ✤ https://github.com/WebAssembly/design ✤ Better asm.js ✤ 初期目標としてasm.jsと同等の機能を実現 19
  20. 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. 21. asm.jsとの違い ✤ よりWebと馴染むような仕様 ✤ マルチスレッド、SIMDとの統合 ✤ GC、DOM、Web APIの操作 ✤ 様々な言語からの移植性を高める ✤ ブラウザ以外への組み込みも視野 21
  22. 22. WebAssemblyが変えない未来 ✤ DOMの呪縛からは解放されない ✤ JavaScriptの実行モデルからは大きく変化しない ✤ プログラミング言語のWebAssembly対応は
 別CPUへの移植と同程度のコストがかかる (たぶん) 22
  23. 23. まとめ 23
  24. 24. まとめ ✤ asm.jsを効果的に使えば、これまでWebでできなかっ た種類のアプリケーションが実現できる ✤ WebAssemblyによる順当な進化に期待 ✤ なんでも速くなる魔法ではないので、
 用法用量を守って正しくお使いください 24

×