1
# 计算密集型任务示例：图像处理
2
# JavaScript 处理 4K 图片可能需要数秒
3
# WebAssembly 处理同样图片只需数百毫秒
4

5
# WebAssembly 适合场景：
6
use_cases = {
7
    "图像/视频处理": "滤镜、缩放、编解码",
8
    "游戏引擎": "Unity WebGL、Unreal",
9
    "加密计算": "端到端加密、哈希",
10
    "数据可视化": "大规模图表、3D 渲染",
11
    "CAD 应用": "建筑设计、工程制图",
12
    "音频处理": "音频编辑、合成"
13
}

1
// WebAssembly 线性内存
2
// C/C++ 代码示例
3
#include <stdlib.h>
4

5
// 分配 1MB 内存
6
void* buffer = malloc(1024 * 1024);
7

8
// 读写内存
9
((int*)buffer)[0] = 42;
10
int value = ((int*)buffer)[0];
11

12
// JavaScript 访问 WebAssembly 内存
13
const memory = new WebAssembly.Memory({ initial: 10 });
14
const view = new Uint8Array(memory.buffer);
15
view[0] = 255;  // 写入第一个字节

1
// 加载 WebAssembly 模块
2
async function loadWasm(url) {
3
  const response = await fetch(url);
4
  const bytes = await response.arrayBuffer();
5
  const { instance } = await WebAssembly.instantiate(bytes, {
6
    env: {
7
      // 导入 JavaScript 函数供 WASM 调用
8
      emscripten_memcpy_js: (dest, src, num) => {
9
        return Module.HEAP8.copyWithin(dest, src, src + num);
10
      },
11
      // 日志函数
12
      log: msg => console.log(`WASM: ${msg}`),
13
    },
14
  });
15
  return instance.exports;
16
}
17

18
// 调用导出函数
19
const wasm = await loadWasm("/module.wasm");
20
const result = wasm.add(1, 2); // 调用 WASM 中的 add 函数

1
# 滤镜处理性能对比（处理 1920x1080 图片）
2
performance = {
3
    "JavaScript": {
4
        "模糊滤镜": "2800ms",
5
        "边缘检测": "1900ms"
6
    },
7
    "WebAssembly": {
8
        "模糊滤镜": "45ms",
9
        "边缘检测": "32ms"
10
    }
11
}
12
# 提升：60-60x 性能

1
// 浏览器端私钥签名
2
class CryptoWallet {
3
  async signTransaction(tx) {
4
    // 使用 WASM 进行椭圆曲线签名
5
    const signature = await this.wasmModule.sign(tx.hash, this.privateKey);
6
    return signature;
7
  }
8
}

1
// 注册 Service Worker
2
if ("serviceWorker" in navigator) {
3
  navigator.serviceWorker
4
    .register("/sw.js")
5
    .then(registration => {
6
      console.log("SW 注册成功:", registration.scope);
7
    })
8
    .catch(error => {
9
      console.error("SW 注册失败:", error);
10
    });
11
}
12

13
// sw.js - 安装阶段
14
const CACHE_NAME = "my-app-cache-v1";
15
const ASSETS_TO_CACHE = [
16
  "/",
17
  "/index.html",
18
  "/styles.css",
19
  "/app.js",
20
  "/images/logo.png",
21
];
22

23
self.addEventListener("install", event => {
24
  console.log("Service Worker 安装中...");
25
  event.waitUntil(
26
    caches
27
      .open(CACHE_NAME)
28
      .then(cache => {
29
        console.log("缓存资源");
30
        return cache.addAll(ASSETS_TO_CACHE);
31
      })
32
      .then(() => self.skipWaiting()) // 立即激活
33
  );
34
});

1
// sw.js - 激活阶段
2
self.addEventListener("activate", event => {
3
  console.log("Service Worker 激活中...");
4
  event.waitUntil(
5
    // 清理旧版本缓存
6
    caches
7
      .keys()
8
      .then(cacheNames => {
9
        return Promise.all(
10
          cacheNames
11
            .filter(name => name !== CACHE_NAME)
12
            .map(name => caches.delete(name))
13
        );
14
      })
15
      .then(() => self.clients.claim()) // 立即控制页面
16
  );
17
});

1
// sw.js - 抓取阶段
2
self.addEventListener("fetch", event => {
3
  const { request } = event;
4
  const url = new URL(request.url);
5

6
  // API 请求：网络优先
7
  if (url.pathname.startsWith("/api/")) {
8
    event.respondWith(
9
      fetch(request)
10
        .then(response => {
11
          // 缓存新的响应
12
          const clone = response.clone();
13
          caches.open(CACHE_NAME).then(cache => {
14
            cache.put(request, clone);
15
          });
16
          return response;
17
        })
18
        .catch(() => caches.match(request)) // 网络失败则用缓存
19
    );
20
    return;
21
  }
22

23
  // 静态资源：缓存优先
24
  event.respondWith(
25
    caches.match(request).then(cached => {
26
      if (cached) return cached;
27
      return fetch(request).then(response => {
28
        // 缓存新资源
29
        const clone = response.clone();
30
        caches.open(CACHE_NAME).then(cache => {
31
          cache.put(request, clone);
32
        });
33
        return response;
34
      });
35
    })
36
  );
37
});

1
// 实际应用中的分层缓存策略
2
const CACHE_STRATEGIES = {
3
  // 静态资源：缓存优先，渐进更新
4
  staticAssets: {
5
    match: ({ url }) =>
6
      url.origin === location.origin &&
7
      url.pathname.match(/\.(js|css|png|jpg|woff2)$/),
8
    strategy: "StaleWhileRevalidate",
9
    maxAge: 7 * 24 * 60 * 60, // 7 天
10
  },
11

12
  // API 响应：网络优先，缓存备用
13
  apiData: {
14
    match: ({ url }) => url.pathname.startsWith("/api/"),
15
    strategy: "NetworkFirst",
16
    maxAge: 5 * 60, // 5 分钟
17
    maxEntries: 100,
18
  },
19

20
  // 用户数据：仅缓存，不更新
21
  userContent: {
22
    match: ({ url }) => url.pathname.startsWith("/user/"),
23
    strategy: "CacheOnly",
24
    maxEntries: 50,
25
  },
26

27
  // 外部资源：网络优先
28
  external: {
29
    match: ({ url }) => url.origin !== location.origin,
30
    strategy: "NetworkFirst",
31
    maxAge: 24 * 60 * 60, // 1 天
32
  },
33
};

1
// 后台同步 - 网络恢复后自动同步
2
self.addEventListener("sync", event => {
3
  if (event.tag === "sync-data") {
4
    event.waitUntil(syncData());
5
  }
6
});
7

8
async function syncData() {
9
  const response = await fetch("/api/sync", {
10
    method: "POST",
11
    body: JSON.stringify(await getPendingData()),
12
  });
13
  return response.json();
14
}
15

16
// 页面端触发同步
17
navigator.serviceWorker.ready.then(registration => {
18
  registration.sync.register("sync-data");
19
});

1
// 订阅推送
2
async function subscribePush() {
3
  const permission = await Notification.requestPermission();
4
  if (permission !== "granted") return;
5

6
  const registration = await navigator.serviceWorker.ready;
7
  const subscription = await registration.pushManager.subscribe({
8
    userVisibleOnly: true,
9
    applicationServerKey: vapidPublicKey,
10
  });
11

12
  await fetch("/api/push/subscribe", {
13
    method: "POST",
14
    body: JSON.stringify(subscription),
15
  });
16
}
17

18
// SW 接收推送
19
self.addEventListener("push", event => {
20
  const data = event.data.json();
21
  const options = {
22
    body: data.body,
23
    icon: "/icons/icon.png",
24
    badge: "/icons/badge.png",
25
    vibrate: [100, 50, 100],
26
    data: { url: data.url },
27
  };
28

29
  event.waitUntil(self.registration.showNotification(data.title, options));
30
});

1
# 1. 减少内存分配
2
# 频繁分配
3
for i in range(1000):
4
    arr.append(i * 2)  # 频繁扩容
5

6
# 预分配
7
arr = [0] * 1000  # 一次分配
8
for i in range(1000):
9
    arr[i] = i * 2
10

11
# 2. 使用 SIMD 指令
12
# WebAssembly SIMD 可以同时处理多个数据
13
# 128 位寄存器可存 4 个 32 位整数或 4 个浮点数
14

15
# 3. 避免跨语言边界
16
# 频繁调用
17
for i in range(10000):
18
    wasm.add(i, 1)  # 每次都有开销
19

20
# 批量处理
21
wasm.processArray(arr)  # 一次调用处理全部

1
// 1. 使用增量缓存
2
self.addEventListener("fetch", event => {
3
  // 对大文件使用流式缓存
4
  if (request.url.match(/\.(mp4|zip|pdf)$/)) {
5
    event.respondWith(
6
      caches.open(CACHE_NAME).then(cache => {
7
        return cache.match(request).then(cached => {
8
          const fetched = fetch(request);
9
          if (cached) return cached;
10
          return fetched.then(response => {
11
            cache.put(request, response.clone());
12
            return response;
13
          });
14
        });
15
      })
16
    );
17
  }
18
});
19

20
// 2. 预缓存关键资源
21
self.addEventListener("install", event => {
22
  event.waitUntil(
23
    // 优先缓存关键渲染路径资源
24
    caches.open(CACHE_NAME).then(cache => {
25
      return cache.addAll(["/index.html", "/styles.css", "/app.js"]);
26
    })
27
  );
28
});
29

30
// 3. 使用 IndexedDB 存储大数据
31
async function storeLargeData(key, data) {
32
  const db = await openDB("app-db", 1);
33
  const tx = db.transaction("data", "readwrite");
34
  tx.store.put(data, key);
35
  return tx.complete;
36
}

1
# WebAssembly 安全特性
2
security = {
3
    "内存隔离": "每个模块有独立线性内存",
4
    "类型安全": "强类型系统防止溢出攻击",
5
    "沙箱执行": "无法直接访问系统资源",
6
    "CSP 限制": "可配合 Content-Security-Policy 使用"
7
}
8

9
# 注意事项
10
warnings = [
11
    "不要信任未验证的 WASM 模块",
12
    "内存操作需严格边界检查",
13
    "敏感计算应在服务端完成"
14
]

1
// 安全最佳实践
2
const SECURITY_CONFIG = {
3
  // 1. 限制 SW 作用域
4
  scope: "/app/", // 只控制 /app/ 路径
5

6
  // 2. 使用 HTTPS
7
  // Service Worker 必须运行在 HTTPS
8

9
  // 3. 不缓存敏感信息
10
  excludeFromCache: ["/api/auth/", "/user/payment/"],
11

12
  // 4. 清理敏感缓存
13
  onActivate: async () => {
14
    const cache = await caches.open(CACHE_NAME);
15
    const keys = await cache.keys();
16
    for (const request of keys) {
17
      if (request.url.includes("/user/")) {
18
        cache.delete(request);
19
      }
20
    }
21
  },
22
};