Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
festudy02-wasm
Search
chikoski
December 15, 2020
1
930
festudy02-wasm
chikoski
December 15, 2020
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
260
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
640
Functions in JavaScript
chikoski
1
1.1k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
530
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.3k
いまさら振り返るPromise
chikoski
1
510
Design and Implementation of Tech Talks
chikoski
0
110
Featured
See All Featured
Music & Morning Musume
bryan
46
6.1k
For a Future-Friendly Web
brad_frost
175
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Navigating Team Friction
lara
183
14k
Code Reviewing Like a Champion
maltzj
519
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Being A Developer After 40
akosma
86
590k
GraphQLとの向き合い方2022年版
quramy
43
13k
Designing for humans not robots
tammielis
249
25k
4 Signs Your Business is Dying
shpigford
180
21k
Six Lessons from altMBA
skipperchong
26
3.4k
Transcript
Web フロントエンド パフォーマンスとWebAssembly 期待できることと、できないこと。 chikoski@ : WebAssembly Night organizer
• CPU インテンシブな作業 パフォーマンス改善 期待できるが、 めちゃくちゃ速くなるわけで ない • パフォーマンスグリッチ 起きにくくなることが期待される
• ロードパフォーマンスへ 影響 慎重な検討と対策が必要 TL; DR
chikoski@ • WebAssembly Night • We Are JavaScripters • Rust
LT • Rust Tokyo / Rust Fest Global
WebAssembly と
安全で ポータブルな コンパイラターゲット
None
http://webassembly.studio/
#define WASM_EXPORT __attribute__((visibility("default"))) WASM_EXPORT int add(int a, int b) {
return a + b; } #[no_mangle] pub extern "C" fn add(x: i32, y: i32) -> i32 { x + y } export function add(x: i32, y: i32): i32 { return x + y; }
Introduction of WebAssembly, https://rsms.me/wasm-intro
x86 ARM
const stream = await fetch('some.wasm'); const buffer = await stream.arrayBuffer();
const instance = WebAssembly.instantiate(buffer, {}); const value = instance.exports.add(1, 2);
wasm-function[0]: sub rsp, 8 mov ecx, esi mov eax, ecx
add eax, edi nop add rsp, 8 ret x86
エコシステム パフォーマンス
Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)
Zoom on Web: getting connected with advanced web technology, web.dev
LIVE
WebAssembly と • ソースコードをコンパイルして作るバイナリファイル • 使い方 ◦ WebAssembly.instantitate でインスタンス化する ◦
WebAssemlby モジュールからエキスポートされた関数を JS から呼び出して実行する • 利用例 パターン:エコシステムとパフォーマンス
WebAssembly とパフォーマンス
A Real-World WebAssembly Benchmark https://pspdfkit.com/blog/2018/a-real-world-webassembly-benchmark
Oxidizing Source Maps with Rust and WebAssembly https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/
Replacing a hot path in your app's JavaScript with WebAssembly
https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
パフォーマンスが安定していて、結果を予想しやすい
Webとパフォーマンス
ページロード プログラム実行 電力消費 ある処理 速さ。例:遅延、スループット、 frame per second ページ 読み込み
速さ。例: Largest Containtful Paint 消費される電力量
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
Background Features in Google Meet, Powered by Web ML Tingbo
Hou and Tyler Mullen, Software Engineers, Google Research
パフォーマンス最適化 目的:UX 最大化
• UX に 、実行速度 改善 どれくらい貢献するんだろう? • メインスレッドをブロックしてないだろうか • 何に時間がかかっている
だろう? • やらなくて良い処理をやっていないだろうか? WebAssembly を使う前に
Core Web Vitals https://web.dev/vitals/
None
None
ウェブブラウザ off-the-main-thread API 話 https://nhiroki.jp/2018/05/07/off-the-main-thread-api
CPUインテンシブ プログラム実行 I/Oインテンシブ 実行時間 CPU スピードで決まる 実行時間 通信スピードで決まる
None
None
None
None
最適化をする前に覚えておきたい技術 , Unite Tokyo 2017, 黒河 優介(ユニティ・テクノロジーズ・ジャパン合同会社 )
ロードパフォーマンスへ 影響を最小限にするために • キャッシュを上手に使おう • ロードを工夫しよう • ストリームコンパイルをしよう
• Wasm ファイル アセット 一種 ◦ 変更頻度が低いことが期待される ◦ キャッシュが有効 •
ネイティブコードをキャッシュする ランタイムも多い • Tips ◦ URL を変えない ◦ ステータスコードを正しく返す ◦ Wasm ファイル サイズを小さくしすぎない キャッシュを上手に使おう x86 ARM
ローディングを工夫しよう • LCP / FID へ影響を注意しよう • Tips ◦ 必要になるまでロードしない
◦ prefetch / Service Worker 利用も有効 ◦ base module + feature module ◦ コンパイル時 サイズ最適化 ▪ -Oz オプションをつける ▪ wasm-opt / twiggy などを利用する
• Wasm インスタンス化 ダウンロード 途中でも始められる • Tips ◦ WebAssembly.instantiateStreaming ◦
Content type を application/wasm に 設定する ストリームコンパイル
const response = fetch("some.wasm"); const instance = WebAssembly.instantiateStreaming(response, {}); const
value = instance.exports.add(1, 2);
まとめ
• CPU インテンシブな作業 パフォーマンス改善 期待できるが、 大きなパフォーマンス改善 約束されていない • 安定したパフォーマンスを期待できる。 •
ロードパフォーマンスへ 影響 慎重な検討と対策が必要 • 他 言語 エコシステムを利用できる Wasm に期待できることと、できないこと
https://squoosh.app/
Sonic Boom! Audio Programming on Android and Chrome (Google I/O'19)