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
980
festudy02-wasm
chikoski
December 15, 2020
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
310
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
720
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Design and Implementation of Tech Talks
chikoski
0
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
The Invisible Side of Design
smashingmag
301
51k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How GitHub (no longer) Works
holman
314
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Faster Mobile Websites
deanohume
307
31k
Navigating Team Friction
lara
187
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
What's in a price? How to price your products and services
michaelherold
246
12k
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)