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
×

of

asm.jsとWebAssemblyって実際なんなの? Slide 1 asm.jsとWebAssemblyって実際なんなの? Slide 2 asm.jsとWebAssemblyって実際なんなの? Slide 3 asm.jsとWebAssemblyって実際なんなの? Slide 4 asm.jsとWebAssemblyって実際なんなの? Slide 5 asm.jsとWebAssemblyって実際なんなの? Slide 6 asm.jsとWebAssemblyって実際なんなの? Slide 7 asm.jsとWebAssemblyって実際なんなの? Slide 8 asm.jsとWebAssemblyって実際なんなの? Slide 9 asm.jsとWebAssemblyって実際なんなの? Slide 10 asm.jsとWebAssemblyって実際なんなの? Slide 11 asm.jsとWebAssemblyって実際なんなの? Slide 12 asm.jsとWebAssemblyって実際なんなの? Slide 13 asm.jsとWebAssemblyって実際なんなの? Slide 14 asm.jsとWebAssemblyって実際なんなの? Slide 15 asm.jsとWebAssemblyって実際なんなの? Slide 16 asm.jsとWebAssemblyって実際なんなの? Slide 17 asm.jsとWebAssemblyって実際なんなの? Slide 18 asm.jsとWebAssemblyって実際なんなの? Slide 19 asm.jsとWebAssemblyって実際なんなの? Slide 20 asm.jsとWebAssemblyって実際なんなの? Slide 21 asm.jsとWebAssemblyって実際なんなの? Slide 22 asm.jsとWebAssemblyって実際なんなの? Slide 23 asm.jsとWebAssemblyって実際なんなの? Slide 24
Upcoming SlideShare
【Unite 2017 Tokyo】WebGL:ゲームプラットフォームとしてのWebと現在と未来
Next
Download to read offline and view in fullscreen.

21 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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
  • mizukiizuna

    Sep. 9, 2021
  • ssuser8ca026

    Sep. 19, 2020
  • yatima_k

    Jun. 14, 2020
  • YothiTheSlider

    May. 26, 2019
  • ChihfengChou

    Sep. 12, 2018
  • kazuhiroikeda921

    May. 28, 2018
  • 99corps

    May. 18, 2018
  • tellzeta

    Aug. 25, 2017
  • yusukenakanishi

    Mar. 30, 2017
  • aki_55p

    Dec. 9, 2016
  • yoheiterazono

    Nov. 18, 2016
  • HirokiNakamura7

    Nov. 11, 2016
  • shuntasuzuki31

    Sep. 2, 2016
  • yudaikawai

    Aug. 13, 2016
  • YoshioOkumura

    Mar. 24, 2016
  • ShingoYamazaki

    Feb. 20, 2016
  • ssuserb8ea33

    Dec. 26, 2015
  • stelth_red

    Nov. 14, 2015
  • shinchachao

    Nov. 2, 2015
  • takafumitsuchida5

    Aug. 26, 2015

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

Views

Total views

14,624

On Slideshare

0

From embeds

0

Number of embeds

1,552

Actions

Downloads

25

Shares

0

Comments

0

Likes

21

×