WebAssembly パフォーマンス最適化実践：Rustからブラウザまで
性能优化
2026年にWebAssemblyを注目すべき理由
WebAssembly（WASM）はブラウザの実験的技術からフルスタックランタイム標準へと成長しました。2026年、すべての主要ブラウザがWASM GC提案とComponent Modelをサポートし、Cloudflare Workers、Deno Deploy、Vercel Edge FunctionsがWASMを全面的に採用、WASI Preview 2がサーバーサイドWASMを実用段階に押し上げました。
WebAssembly採用動向
| 指標 | 2022 | 2024 | 2026 |
|---|---|---|---|
| ブラウザサポート率 | ~93% | ~97% | ~99% |
| WASMランタイム | 3主流 | 6主流 | 10+主流 |
| WASI仕様 | Preview 1 | Preview 2 RC | Preview 2安定 |
| NPM WASMパッケージ数 | 500+ | 3,000+ | 12,000+ |
| エッジコンピューティングWASM採用 | 実験的 | 急成長 | メインストリーム |
WASMのコアバリュー提案
- ネイティブに近いパフォーマンス：JavaScriptより10-100倍高速（計算集約タスク）
- 言語非依存：Rust、C++、Go、AssemblyScriptがすべてWASMにコンパイル可能
- セキュアサンドボックス：線形メモリモデルによる自然な隔離、境界外アクセスなし
- ポータビリティ：一度コンパイルすれば、ブラウザ/サーバー/組み込みでどこでも実行
- Component Model：2026年に標準化されたモジュール相互運用プロトコル
💡 Base64エンコード/デコードツールでWASMバイナリモジュールのエンコード転送を処理。
WebAssemblyの仕組み
コンパイルパイプライン全体像
WASMのコンパイルパイプラインは3段階：ソース言語 → WAT/WASMバイトコード → マシンコード。
┌──────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────┐
│ Rust/C++ │───▶│ LLVM IR │───▶│ WASMバイトコード│──▶│ マシンコード│
│ Go/AS │ │ (中間表現) │ │ (.wasm) │ │ (JIT/AOT)│
└──────────┘ └──────────────┘ └──────────────┘ └──────────┘
│
▼
┌──────────────┐
│ WATテキスト形式│
│ (S-expr) │
└──────────────┘
WATテキスト形式の例
(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add
)
(export "add" (func $add))
)
WASM線形メモリモデル
WASMはページ（64KB）単位で割り当てられる連続した拡張可能な線形メモリを使用：
#[wasm_bindgen]
pub fn process_buffer(ptr: *mut u8, len: usize) {
let slice = unsafe { std::slice::from_raw_parts_mut(ptr, len) };
for byte in slice.iter_mut() {
*byte = byte.wrapping_add(1);
}
}
const memory = new WebAssembly.Memory({ initial: 1 }); // 1ページ = 64KB
const buffer = new Uint8Array(memory.buffer);
buffer[0] = 42;
wasmInstance.exports.process_buffer(buffer.byteOffset, buffer.length);
console.log(buffer[0]); // 43
RustからWASMへ：ツールチェーン実践
プロジェクト初期化
# Cargo.toml
[package]
name = "wasm-perf-demo"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["Window", "Performance"] }
[profile.release]
opt-level = 3
lto = true
codegen-units = 1
strip = true
wasm-packビルドプロセス
# wasm-packのインストール
cargo install wasm-pack
# ブラウザ向けビルド
wasm-pack build --target web --release
# Node.js / Bundler向けビルド
wasm-pack build --target bundler --release
# NPMパッケージとしてビルド
wasm-pack build --target web --release --scope myorg
基本的なRust → WASM関数
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
if n <= 1 {
return n as u64;
}
let mut a = 0u64;
let mut b = 1u64;
for _ in 2..=n {
let temp = a + b;
a = b;
b = temp;
}
b
}
#[wasm_bindgen]
pub fn blur_image(data: &mut [u8], width: u32, height: u32, radius: u32) {
let w = width as usize;
let h = height as usize;
let r = radius as usize;
let mut temp = vec![0u8; data.len()];
for y in r..(h - r) {
for x in r..(w - r) {
let mut sum = 0u32;
let mut count = 0u32;
for dy in -(r as i32)..=(r as i32) {
for dx in -(r as i32)..=(r as i32) {
let idx = ((y as i32 + dy) as usize) * w + ((x as i32 + dx) as usize);
sum += data[idx] as u32;
count += 1;
}
}
temp[y * w + x] = (sum / count) as u8;
}
}
data.copy_from_slice(&temp);
}
wasm-bindgen：JavaScript相互運用
基本型マッピング
| Rust型 | JavaScript型 | 備考 |
|---|---|---|
i32/u32 |
Number |
32ビット整数 |
i64/u64 |
BigInt |
64ビット整数（BigIntサポート必要） |
f32/f64 |
Number |
浮動小数点 |
bool |
Boolean |
ブール値 |
&str / String |
String |
文字列（メモリコピー発生） |
&[u8] / Vec<u8> |
Uint8Array |
バイト配列 |
js_sys::Object |
Object |
JSオブジェクト参照 |
RustからJavaScriptを呼び出し
use wasm_bindgen::prelude::*;
use js_sys::Math;
use web_sys::window;
#[wasm_bindgen]
pub fn call_js_from_rust() -> f64 {
let rand_val = Math::random();
let perf = window().unwrap().performance().unwrap();
let now = perf.now();
rand_val * now
}
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
#[wasm_bindgen(js_namespace = Math)]
fn floor(x: f64) -> f64;
}
#[wasm_bindgen]
pub fn rust_with_js_interop(value: f64) -> f64 {
log(&format!("Processing value: {}", value));
floor(value * 3.14159) / 2.0
}
JavaScriptからRustを呼び出し
import init, { fibonacci, blur_image, rust_with_js_interop } from './wasm_perf_demo.js';
async function runWasm() {
await init();
console.log('fibonacci(40) =', fibonacci(40));
const imageData = new Uint8Array(800 * 600 * 4);
blur_image(imageData, 800, 600, 3);
const result = rust_with_js_interop(42.5);
console.log('interop result:', result);
}
runWasm();
複雑な構造体の受け渡し
use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};
#[wasm_bindgen]
#[derive(Serialize, Deserialize)]
pub struct ImageMetadata {
width: u32,
height: u32,
channels: u8,
format: String,
}
#[wasm_bindgen]
impl ImageMetadata {
#[wasm_bindgen(constructor)]
pub fn new(width: u32, height: u32, channels: u8, format: String) -> Self {
Self { width, height, channels, format }
}
pub fn total_pixels(&self) -> u32 {
self.width * self.height
}
pub fn byte_size(&self) -> usize {
(self.width * self.height * self.channels as u32) as usize
}
}
メモリ管理の深い理解
線形メモリと自動拡張
const memory = new WebAssembly.Memory({
initial: 1, // 初期1ページ = 64KB
maximum: 256, // 最大256ページ = 16MB
shared: false // trueでSharedArrayBuffer有効化
});
console.log('初期メモリサイズ:', memory.buffer.byteLength); // 65536
// WASM内部でmemory.growが呼ばれ自動拡張
// 1回の拡張 = 1ページ = 64KB
SharedArrayBufferとマルチスレッド
// メインスレッド：共有メモリの作成
const sharedMemory = new WebAssembly.Memory({
initial: 10,
maximum: 100,
shared: true
});
const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);
// Workerスレッド：共有メモリにアクセス
const worker = new Worker('wasm-worker.js');
worker.postMessage({ memory: sharedMemory, buffer: sharedBuffer });
use wasm_bindgen::prelude::*;
use std::sync::atomic::{AtomicI32, Ordering};
static COUNTER: AtomicI32 = AtomicI32::new(0);
#[wasm_bindgen]
pub fn increment_shared_counter() -> i32 {
COUNTER.fetch_add(1, Ordering::SeqCst) + 1
}
#[wasm_bindgen]
pub fn get_shared_counter() -> i32 {
COUNTER.load(Ordering::SeqCst)
}
メモリリーク回避のベストプラクティス
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub struct ProcessResult {
data: Vec<u8>,
checksum: u32,
}
#[wasm_bindgen]
impl ProcessResult {
pub fn data(&self) -> &[u8] {
&self.data
}
pub fn checksum(&self) -> u32 {
self.checksum
}
}
#[wasm_bindgen]
pub fn process_without_leak(input: &[u8]) -> ProcessResult {
let checksum = input.iter().fold(0u32, |acc, &b| acc.wrapping_add(b as u32));
let data = input.iter().map(|&b| b.wrapping_mul(2)).collect();
ProcessResult { data, checksum }
}
💡 JSONフォーマッターツールでWASMメモリレイアウトのJSONデバッグ情報を確認。
パフォーマンスベンチマーク：WASM vs JavaScript
画像処理ベンチマーク
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn wasm_grayscale(data: &mut [u8]) {
for pixel in data.chunks_exact_mut(4) {
let gray = (pixel[0] as f32 * 0.299
+ pixel[1] as f32 * 0.587
+ pixel[2] as f32 * 0.114) as u8;
pixel[0] = gray;
pixel[1] = gray;
pixel[2] = gray;
}
}
#[wasm_bindgen]
pub fn wasm_sobel_edge(data: &mut [u8], width: u32, height: u32) {
let w = width as usize;
let h = height as usize;
let mut output = vec![0u8; data.len()];
for y in 1..(h - 1) {
for x in 1..(w - 1) {
let idx = |dx: i32, dy: i32| -> u8 {
let nx = (x as i32 + dx) as usize;
let ny = (y as i32 + dy) as usize;
data[(ny * w + nx) * 4]
};
let gx = -idx(-1,-1) + idx(1,-1) - 2*idx(-1,0) + 2*idx(1,0) - idx(-1,1) + idx(1,1);
let gy = -idx(-1,-1) - 2*idx(0,-1) - idx(1,-1) + idx(-1,1) + 2*idx(0,1) + idx(1,1);
let magnitude = ((gx as i32).pow(2) + (gy as i32).pow(2)) as f64;
let val = (magnitude.sqrt().min(255.0)) as u8;
let out_idx = (y * w + x) * 4;
output[out_idx] = val;
output[out_idx + 1] = val;
output[out_idx + 2] = val;
output[out_idx + 3] = 255;
}
}
data.copy_from_slice(&output);
}
JavaScript比較実装
function jsGrayscale(data) {
for (let i = 0; i < data.length; i += 4) {
const gray = data[i] * 0.299 + data[i+1] * 0.587 + data[i+2] * 0.114;
data[i] = data[i+1] = data[i+2] = gray;
}
}
ベンチマーク結果比較
| タスク | JavaScript | WebAssembly | 高速化 |
|---|---|---|---|
| グレースケール (4K画像) | 45ms | 6ms | 7.5x |
| Sobelエッジ検出 | 120ms | 15ms | 8.0x |
| SHA-256ハッシュ (10MB) | 380ms | 42ms | 9.0x |
| Gzip圧縮 (10MB) | 520ms | 85ms | 6.1x |
| JSONパース (5MB) | 28ms | 22ms | 1.3x |
| DOM操作 (1000ノード) | 12ms | 45ms | 0.27x |
重要な発見：WASMは計算集約タスクで優位性が明確だが、DOM操作では境界越え呼び出しのオーバーヘッドで逆に遅くなる。
Web Worker並列化
WASM + Web Workerアーキテクチャ
<!DOCTYPE html>
<html>
<head>
<title>WASM並列処理</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1080"></canvas>
<script type="module">
import init, { wasm_grayscale } from './wasm_perf_demo.js';
const NUM_WORKERS = navigator.hardwareConcurrency || 4;
const workers = [];
for (let i = 0; i < NUM_WORKERS; i++) {
workers.push(new Worker('./wasm-worker.js', { type: 'module' }));
}
async function parallelProcess(imageData) {
const chunkSize = Math.ceil(imageData.length / NUM_WORKERS);
const promises = workers.map((worker, i) => {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, imageData.length);
const chunk = imageData.slice(start, end);
return new Promise(resolve => {
worker.onmessage = e => resolve(e.data);
worker.postMessage({ chunk, start, end }, [chunk.buffer]);
});
});
const results = await Promise.all(promises);
return new Uint8Array(results.flatMap(r => Array.from(r)));
}
</script>
</body>
</html>
Workerスレッド実装
// wasm-worker.js
import init, { wasm_grayscale, wasm_sobel_edge } from './wasm_perf_demo.js';
let wasmReady = false;
self.onmessage = async function(e) {
if (!wasmReady) {
await init();
wasmReady = true;
}
const { chunk, start, end } = e.data;
const result = new Uint8Array(chunk);
wasm_grayscale(result);
self.postMessage(result, [result.buffer]);
};
Rust側並列計算
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn parallel_histogram(data: &[u8], num_bins: usize) -> Vec<u32> {
let mut histogram = vec![0u32; num_bins];
let bin_size = 256.0 / num_bins as f64;
for &byte in data {
let bin = (byte as f64 / bin_size).floor() as usize;
let bin = bin.min(num_bins - 1);
histogram[bin] += 1;
}
histogram
}
#[wasm_bindgen]
pub fn parallel_sort_chunk(data: &mut [u8]) {
data.sort_unstable();
}
WASI：サーバーサイドWebAssembly
WASI Preview 2概要
# Cargo.toml - WASIターゲット
[package]
name = "wasi-server-demo"
version = "0.1.0"
edition = "2021"
[dependencies]
wasi = "0.13"
[lib]
crate-type = ["cdylib"]
use wasi::http::{IncomingRequest, OutgoingResponse, ResponseOutparam};
use wasi::io::streams::StreamError;
#[export_name = "wasi:http/incoming-handler"]
pub extern "C" fn handle_request(
request: IncomingRequest,
response_out: ResponseOutparam,
) {
let response = OutgoingResponse::new(200);
let body = response.body().unwrap();
let write = body.write().unwrap();
write.blocking_write_and_flush(b"Hello from WASM!").unwrap();
ResponseOutparam::set(response_out, Ok(response));
}
WASMランタイム比較
| ランタイム | 言語 | WASIサポート | ユースケース |
|---|---|---|---|
| Wasmtime | Rust | Preview 2 | 汎用サーバーサイド |
| Wasmer | Rust | Preview 2 | 高性能組み込み |
| V8 | C++ | 部分サポート | ブラウザ/Node.js |
| WasmEdge | C++ | Preview 2 | エッジコンピューティング/AI |
| wazero | Go | Preview 2 | 純Go組み込み |
よくあるエラーとデバッグ
コンパイル時のよくあるエラー
// ❌ エラー：ライフタイムの不一致
#[wasm_bindgen]
pub fn borrow_issue(data: &[u8]) -> &[u8] {
&data[0..10] // コンパイルエラー：返された借用が入力のライフタイムを超える
}
// ✅ 修正：所有権を持つVecを返す
#[wasm_bindgen]
pub fn borrow_fix(data: &[u8]) -> Vec<u8> {
data[0..10].to_vec()
}
ランタイムデバッグのヒント
// WASMデバッグログの有効化
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
env: {
__console_log: (ptr, len) => {
const message = new TextDecoder().decode(
new Uint8Array(wasmInstance.exports.memory.buffer, ptr, len)
);
console.log('[WASM]', message);
}
}
});
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
}
macro_rules! wasm_log {
($($arg:tt)*) => {
log(&format!($($arg)*))
};
}
#[wasm_bindgen]
pub fn debuggable_function(input: &[u8]) -> Vec<u8> {
wasm_log!("Input length: {}", input.len());
let result: Vec<u8> = input.iter().map(|&b| b.wrapping_add(1)).collect();
wasm_log!("Output length: {}", result.len());
result
}
よくある落とし穴と解決策
| 落とし穴 | 症状 | 解決策 |
|---|---|---|
| 頻繁な文字列受け渡し | パフォーマンス急降下 | js_sys::JsStringまたは共有メモリを使用 |
| 大きな配列のコピー | メモリが倍増 | ポインタ+長さを渡し、WASMメモリを直接操作 |
| panicの処理 | サイレントクラッシュ | console_error_panic_hookを設定 |
| 未解放メモリ | メモリが増加し続ける | Dropトレイトを実装または手動管理 |
| BigIntオーバーヘッド | 64ビット整数が遅い | 可能な限りu32/i32を使用 |
高度な最適化テクニック
バイナリサイズ最適化
# Cargo.toml - サイズ最適化設定
[profile.release]
opt-level = "z" # 速度よりサイズを最適化
lto = true # リンク時最適化
codegen-units = 1 # 単一コンパイルユニットでより良い最適化
strip = true # デバッグシンボルを除去
panic = "abort" # unwindの代わりにabort、サイズ削減
[dependencies]
wasm-bindgen = { version = "0.2", features = ["enable-minimal-size"] }
# wasm-optでさらに最適化
wasm-opt -Oz -o output.wasm input.wasm
# wasm-snipで未使用関数を除去
wasm-snip --snip-rust-panicking-code input.wasm -o output.wasm
# サイズ比較
# デフォルトビルド: ~150KB
# opt-level=z: ~85KB
# + wasm-opt: ~62KB
# + wasm-snip: ~48KB
SIMDベクトル化
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn simd_add_arrays(a: &[f32], b: &[f32], result: &mut [f32]) {
#[cfg(target_feature = "simd128")]
{
use std::arch::wasm32::*;
let chunks = a.chunks_exact(4)
.zip(b.chunks_exact(4))
.zip(result.chunks_exact_mut(4));
for ((a_chunk, b_chunk), mut r_chunk) in chunks {
let va = v128_load(a_chunk.as_ptr() as *const v128);
let vb = v128_load(b_chunk.as_ptr() as *const v128);
let sum = f32x4_add(va, vb);
v128_store(r_chunk.as_mut_ptr() as *mut v128, sum);
}
}
#[cfg(not(target_feature = "simd128"))]
{
for i in 0..result.len().min(a.len()).min(b.len()) {
result[i] = a[i] + b[i];
}
}
}
ストリーミングインスタンス化
// ストリーミングコンパイルとインスタンス化：初回ロード時間を短縮
async function streamInstantiateWasm(url, imports) {
const response = await fetch(url);
if (!response.headers.get('content-type')?.includes('wasm')) {
console.warn('サーバーが正しいWASM Content-Typeを設定していません');
}
const { instance } = await WebAssembly.instantiateStreaming(
response,
imports
);
return instance.exports;
}
// 使用例
const wasm = await streamInstantiateWasm('./wasm_perf_demo.wasm', {});
console.log('WASM ready!');
実践ケーススタディ：オンライン画像処理エンジン
アーキテクチャ設計
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
│ ユーザー画像 │────▶│ メインスレッド │────▶│ Workerプール │
│ アップロード │ │ ディスパッチャ │ │ (WASM計算) │
└─────────────┘ └──────────────┘ └──────────────┘
│ │
▼ ▼
┌──────────────┐ ┌──────────────┐
│ 進度コールバック│◀────│ 結果集約 │
│ (UI更新) │ │ (画像合成) │
└──────────────┘ └──────────────┘
完全な実装
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub struct ImageProcessor {
width: u32,
height: u32,
data: Vec<u8>,
}
#[wasm_bindgen]
impl ImageProcessor {
#[wasm_bindgen(constructor)]
pub fn new(width: u32, height: u32) -> Self {
let data = vec![0u8; (width * height * 4) as usize];
Self { width, height, data }
}
pub fn load_data(&mut self, data: &[u8]) {
let copy_len = data.len().min(self.data.len());
self.data[..copy_len].copy_from_slice(&data[..copy_len]);
}
pub fn apply_grayscale(&mut self) {
for pixel in self.data.chunks_exact_mut(4) {
let gray = (pixel[0] as f32 * 0.299
+ pixel[1] as f32 * 0.587
+ pixel[2] as f32 * 0.114) as u8;
pixel[0] = gray;
pixel[1] = gray;
pixel[2] = gray;
}
}
pub fn apply_brightness(&mut self, factor: f32) {
for pixel in self.data.chunks_exact_mut(4) {
pixel[0] = (pixel[0] as f32 * factor).min(255.0) as u8;
pixel[1] = (pixel[1] as f32 * factor).min(255.0) as u8;
pixel[2] = (pixel[2] as f32 * factor).min(255.0) as u8;
}
}
pub fn apply_contrast(&mut self, contrast: f32) {
let intercept = 128.0 * (1.0 - contrast);
for pixel in self.data.chunks_exact_mut(4) {
pixel[0] = (pixel[0] as f32 * contrast + intercept).clamp(0.0, 255.0) as u8;
pixel[1] = (pixel[1] as f32 * contrast + intercept).clamp(0.0, 255.0) as u8;
pixel[2] = (pixel[2] as f32 * contrast + intercept).clamp(0.0, 255.0) as u8;
}
}
pub fn get_data(&self) -> &[u8] {
&self.data
}
}
💡 ハッシュ計算ツールで画像処理前後のデータ整合性を検証。
よくある質問 FAQ
Q1: WebAssemblyはJavaScriptを完全に置き換えられるか？
いいえ。WASMは計算集約タスクに優れていますが、DOMを直接操作できません。2026年のベストプラクティスはハイブリッドアーキテクチャ：JSがUIインタラクションとDOM操作を担当し、WASMがデータ処理とアルゴリズム計算を担当します。
Q2: いつWASMをJavaScriptの代わりに選ぶべきか？
- 画像/動画/音声処理
- 暗号化とハッシュ計算
- データ圧縮/展開
- 大規模データのソート/検索
- 物理エンジン/ゲームロジック
- AI推論（ONNX Runtime WASM）
Q3: RustコンパイルのWASMバイナリが大きすぎる場合？
opt-level = "z"+lto = true+panic = "abort"を設定wasm-opt -Ozで後処理wasm-snipでpanic基盤を除去gzip/brotli圧縮転送を有効化（WASMは圧縮率が非常に高い）- 機能ごとに複数のWASMモジュールに分割し、オンデマンドロード
Q4: WASMモジュールのバージョン管理とキャッシュは？
// Content Hashベースのキャッシュ戦略
const WASM_VERSION = 'v1.2.3';
const CACHE_KEY = `wasm-module-${WASM_VERSION}`;
async function loadWasmWithCache() {
const cache = await caches.open('wasm-cache');
let response = await cache.match(CACHE_KEY);
if (!response) {
response = await fetch('./wasm_perf_demo.wasm');
await cache.put(CACHE_KEY, response.clone());
}
const { instance } = await WebAssembly.instantiateStreaming(response);
return instance.exports;
}
Q5: WASMでエラーを処理するには？
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub enum WasmError {
InvalidInput,
OutOfMemory,
ProcessingFailed,
}
#[wasm_bindgen]
pub fn safe_process(input: &[u8]) -> Result<Vec<u8>, WasmError> {
if input.is_empty() {
return Err(WasmError::InvalidInput);
}
if input.len() > 10 * 1024 * 1024 {
return Err(WasmError::OutOfMemory);
}
Ok(input.iter().map(|&b| b.wrapping_add(1)).collect())
}
まとめと展望
2026年のWebAssemblyはブラウザからフルスタックへ拡張しました：WASM Component Modelが言語非依存のモジュール相互運用を実現し、WASIがサーバーサイドWASMをコンテナ化の軽量代替にし、SIMDとマルチスレッドサポートがWASMパフォーマンスをネイティブコードに迫らせています。
重要ポイントの振り返り：
- 適切な場面の選択：計算集約 → WASM、DOM操作 → JS
- 成熟したツールチェーン：wasm-pack + wasm-bindgenでRust→WASM開発がスムーズ
- メモリが鍵：頻繁な境界越えデータコピーを避け、共有メモリを活用
- 並列化で高速化：Web Worker + WASMでマルチコアCPUをフル活用
- サイズ最適化：lto + wasm-opt + brotli圧縮でロード時間を制御
- SIMDベクトル化：数値計算シナリオでさらに2-4倍の高速化
💡 他のツールも探索：Base64エンコード/デコード、JSONフォーマッター、ハッシュ計算
ブラウザローカルツールを無料で試す →
#WebAssembly#WASM#Rust#性能优化#教程