WebAssembly (WASM) เริ่มต้นเป็นวิธีรัน C++ ในเบราว์เซอร์ ในปี 2026 มันรันได้ทุกที่ - เบราว์เซอร์ เซิร์ฟเวอร์ เครือข่าย Edge อุปกรณ์ Embedded - และขับเคลื่อนแอปพลิเคชันที่ต้องการประสิทธิภาพสูงสุดบนเว็บ เอนจิ้นเรนเดอร์ของ Figma, Adobe Photoshop บนเว็บ, การประมวลผลวิดีโอของ Google Meet และแพลตฟอร์ม Edge Compute ของ Cloudflare ล้วนทำงานบน WebAssembly

Chrome Platform Status รายงานว่า WASM อยู่ที่ประมาณ 5.5% ของการโหลดหน้าเว็บทั้งหมดบน Chrome ณ ต้นปี 2026 เพิ่มขึ้นจาก 4.5% ในปีก่อนหน้า เมื่อ WASM 3.0 กลายเป็นมาตรฐาน W3C และ WASI เติบโตมุ่งสู่เวอร์ชัน 1.0 ระบบนิเวศได้มาถึงจุดเปลี่ยนสำคัญแล้ว

คู่มือนี้ครอบคลุมทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อเริ่มต้นสร้างด้วย WebAssembly

WebAssembly คืออะไร?

WebAssembly เป็นรูปแบบคำสั่งแบบไบนารีที่ออกแบบมาเป็นเป้าหมายการคอมไพล์ คุณเขียนโค้ดด้วยภาษาระดับสูง (Rust, C, C++, Go, Kotlin) คอมไพล์เป็น .wasm แล้วรันในสภาพแวดล้อมใดก็ได้ที่มี WASM Runtime - เบราว์เซอร์, Node.js, Cloudflare Workers, Wasmtime หรือ Wasmer

มันทำงานอย่างไร

WASM เป็นเครื่องเสมือนแบบ Stack-based ฟังก์ชันจะ push และ pop ค่าบน Operand Stack Host Runtime (V8 ใน Chrome, SpiderMonkey ใน Firefox) จะ JIT-compile WASM Bytecode เป็น Native Machine Code ซึ่งเป็นเหตุผลที่ประสิทธิภาพใกล้เคียงกับ Native

คุณสมบัติสำคัญ:

• การทำงานแบบ Sandbox: โมดูล WASM สามารถเข้าถึงทรัพยากรได้เฉพาะที่ Host อนุญาตอย่างชัดเจนเท่านั้น ไม่มีการเข้าถึงระบบไฟล์ เครือข่าย หรือ OS เว้นแต่ได้รับอนุญาต สิ่งนี้แตกต่างจาก Native Code โดยพื้นฐาน
• Linear Memory: ArrayBuffer ต่อเนื่องเดียวที่ใช้ร่วมกันระหว่าง WASM และ Host ข้อมูลที่ซับซ้อน (สตริง, โครงสร้าง) จะถูกส่งผ่านโดยการเขียนลงในหน่วยความจำและแชร์ Pointer
• จำกัดด้านประเภทข้อมูล: WASM รองรับเฉพาะสี่ประเภทโดย Native: i32, i64, f32, f64 ทุกอย่างอื่น (สตริง, อาร์เรย์, อ็อบเจกต์) ต้องมีการเข้ารหัสผ่าน Linear Memory หรือ Component Model
• พกพาได้: ไบนารี .wasm เดียวกันรันได้บนทุกแพลตฟอร์มที่มี WASM Runtime โดยไม่ต้องคอมไพล์ใหม่

WASM vs JavaScript

WASM ไม่ได้มาแทนที่ JavaScript แต่มาเสริมมัน

ด้าน	JavaScript	WebAssembly
การ Parse	Parse + Compile ตอน Runtime	ไบนารีที่คอมไพล์ล่วงหน้า, Decode เท่านั้น
ความเร็วในการทำงาน	JIT-optimized, ผันแปร	ใกล้เคียง Native, คงที่
การเริ่มต้น	เร็วสำหรับสคริปต์ขนาดเล็ก	Decode เร็ว, คาดเดาได้
การเข้าถึง DOM	โดยตรง	โดยอ้อม (ผ่าน JS Glue)
เหมาะสำหรับ	UI, การจัดการ DOM, Event Handling	การคำนวณที่ใช้ CPU มาก
Garbage Collection	มีในตัว	WasmGC (ใหม่) หรือจัดการเอง

ใช้ JavaScript สำหรับ UI และงาน DOM ใช้ WASM สำหรับการคำนวณหนัก: การประมวลผลภาพ, การเข้ารหัสวิดีโอ, การจำลองฟิสิกส์, การเข้ารหัสลับ, การแยกวิเคราะห์ข้อมูล

WASM 3.0: มีอะไรใหม่

WebAssembly 3.0 กลายเป็นมาตรฐาน W3C ในเดือนกันยายน 2025 โดยมาตรฐานนี้รวมเก้าฟีเจอร์ที่อยู่ในระหว่างพัฒนามาหลายปี

ฟีเจอร์	สิ่งที่เปิดใช้งาน
WasmGC	Garbage Collection แบบ Native ใน WASM ภาษาที่มี Managed Memory (Java, Kotlin, Dart) สามารถคอมไพล์เป็น WASM ได้โดยไม่ต้องส่ง GC Runtime ของตัวเองมาด้วย รองรับใน Chrome 119+, Firefox 120+, Safari 18.2+
Exception Handling	try/catch แบบ Native ใน WASM ก่อนหน้านี้ Exception ต้องใช้ Roundtrip ไปยัง JavaScript ที่มีค่าใช้จ่ายสูง
Tail Calls	เปิดใช้งาน Recursion ที่มีประสิทธิภาพโดยไม่เกิด Stack Overflow สำคัญสำหรับภาษา Functional
Relaxed SIMD	คำสั่งเวกเตอร์ 128 บิตสำหรับการประมวลผลข้อมูลแบบขนาน เปิดใช้งานการปรับแต่งเฉพาะฮาร์ดแวร์
Memory64	ทำลายขีดจำกัด Linear Memory 4GB จำเป็นสำหรับการประมวลผลข้อมูลขนาดใหญ่
Multi-memory	หลายพื้นที่หน่วยความจำอิสระในโมดูลเดียว

สิ่งที่มีผลกระทบมากที่สุดคือ WasmGC ก่อนหน้านี้ การคอมไพล์ Java หรือ Kotlin เป็น WASM หมายถึงการส่ง Garbage Collector ทั้งตัวเป็นส่วนหนึ่งของไบนารี ทำให้ขนาดไฟล์บวมขึ้น ตอนนี้ GC ของเบราว์เซอร์เองจัดการหน่วยความจำให้กับโมดูล WASM เหมือนกับที่ทำกับ JavaScript

WASI: WebAssembly นอกเบราว์เซอร์

WASM ในเบราว์เซอร์มีพลัง แต่ WASI (WebAssembly System Interface) คือสิ่งที่ทำให้ WASM เป็น Runtime สากล WASI ให้อินเทอร์เฟซมาตรฐานสำหรับทรัพยากรระบบ - ไฟล์ เครือข่าย นาฬิกา ตัวเลขสุ่ม - ทำให้โมดูล WASM รันนอกเบราว์เซอร์ได้

WASI Preview 2 (รุ่นเสถียรปัจจุบัน) กำหนดอินเทอร์เฟซเหล่านี้:

• wasi:filesystem - การดำเนินงานกับไฟล์ผ่าน Capability Handle (ไม่ใช่ File Descriptor แบบดั้งเดิม)
• wasi:sockets - เครือข่าย TCP/UDP
• wasi:http - การจัดการ HTTP Request/Response
• wasi:clocks - Wall Clock, Monotonic Clock
• wasi:random - ตัวเลขสุ่มเชิงเข้ารหัสลับ
• wasi:cli - อาร์กิวเมนต์บรรทัดคำสั่ง, ตัวแปรสภาพแวดล้อม, Standard I/O

หลักการสำคัญคือ ความปลอดภัยแบบ Capability-based: โมดูล WASM ไม่สามารถเข้าถึงระบบไฟล์ได้ เว้นแต่ Host จะให้ Handle ไปยังไดเรกทอรีเฉพาะอย่างชัดเจน สิ่งนี้ทำให้ WASI มีความปลอดภัยมากกว่าการรัน Native Executable โดยพื้นฐาน

เส้นทางสู่ WASI 1.0

WASI 0.3.0 (เพิ่ม Async/Concurrency Primitive) คาดว่าจะมาในปี 2026 ตามด้วย WASI 1.0 สิ่งที่เพิ่มเข้ามาหลักคือ Async แบบรวมกับภาษาพร้อม Zero-copy Streaming I/O

Component Model

โมดูล WASM หลักสามารถแลกเปลี่ยนได้เฉพาะตัวเลข Component Model แก้ข้อจำกัดนี้โดยเพิ่มระบบประเภทข้อมูลที่หลากหลายและเลเยอร์ Composability ด้านบนของ WASM

WIT (WebAssembly Interface Types)

WIT เป็นภาษากำหนดอินเทอร์เฟซที่ให้ Component ประกาศ Import และ Export ด้วยประเภทข้อมูลที่หลากหลาย - สตริง, Record, รายการ, Variant, Enum - ไม่ใช่แค่ i32 และ f64

// calculator.wit
package myorg:calculator@1.0.0;

interface operations {
    record calculation {
        expression: string,
        result: f64,
        timestamp: u64,
    }

    add: func(a: f64, b: f64) -> f64;
    multiply: func(a: f64, b: f64) -> f64;
    history: func() -> list<calculation>;
}

world calculator {
    export operations;
}

Toolchain อย่าง wit-bindgen สร้าง Binding เฉพาะภาษาจากไฟล์ WIT Component ของ Rust และ Component ของ Python สามารถแลกเปลี่ยนสตริง Record และรายการผ่าน WIT Contract ได้โดยไม่ต้องรู้ภาษาของอีกฝ่าย

สร้างโมดูล WASM แรกของคุณด้วย Rust

Rust มีเครื่องมือ WASM ที่เติบโตที่สุด มาสร้างตัวอย่างที่ใช้งานจริง: โมดูลประมวลผลภาพที่รันในเบราว์เซอร์

การตั้งค่า

# Install the WASM target for Rust
rustup target add wasm32-unknown-unknown

# Install wasm-pack (builds Rust to WASM + generates JS bindings)
cargo install wasm-pack

# Create a new library project
cargo new --lib image-processor
cd image-processor

ตั้งค่า Cargo.toml

[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

เขียนโค้ด Rust

// src/lib.rs
use wasm_bindgen::prelude::*;

/// Convert an image buffer to grayscale.
/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
/// Output: Modified in place for zero-copy performance.
#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        // ITU-R BT.709 luminance coefficients
        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] is alpha, leave unchanged
    }
}

/// Adjust brightness of an image.
/// factor > 1.0 brightens, < 1.0 darkens.
#[wasm_bindgen]
pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
    }
}

/// Invert all colors in the image.
#[wasm_bindgen]
pub fn invert(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = 255 - chunk[0];
        chunk[1] = 255 - chunk[1];
        chunk[2] = 255 - chunk[2];
    }
}

/// Calculate the average brightness of an image (0-255).
#[wasm_bindgen]
pub fn average_brightness(pixels: &[u8]) -> f32 {
    let mut total: f64 = 0.0;
    let pixel_count = pixels.len() / 4;
    for chunk in pixels.chunks_exact(4) {
        let luminance = 0.2126 * chunk[0] as f64
            + 0.7152 * chunk[1] as f64
            + 0.0722 * chunk[2] as f64;
        total += luminance;
    }
    (total / pixel_count as f64) as f32
}

Build

wasm-pack build --target web

สิ่งนี้สร้างไดเรกทอรี pkg/ ที่มี:

• image_processor_bg.wasm - ไบนารี WASM ที่คอมไพล์แล้ว
• image_processor.js - โค้ด JavaScript Glue พร้อมคำจำกัดความ TypeScript
• package.json - พร้อมเผยแพร่ไปยัง npm

ใช้ใน JavaScript

<!DOCTYPE html>
<html>
<head><title>WASM Image Processor</title></head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <button onclick="applyGrayscale()">Grayscale</button>
  <button onclick="applyBrightness()">Brighten</button>
  <button onclick="applyInvert()">Invert</button>

  <script type="module">
    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";

    let ctx;
    let imageData;

    async function setup() {
      await init();
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      // Load an image onto the canvas
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      };
      img.src = "photo.jpg";
    }

    window.applyGrayscale = () => {
      grayscale(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyBrightness = () => {
      adjust_brightness(imageData.data, 1.3);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyInvert = () => {
      invert(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    setup();
  </script>
</body>
</html>

ประเด็นสำคัญ: imageData.data เป็น Uint8ClampedArray ที่มี ArrayBuffer อยู่เบื้องหลัง เมื่อส่งไปยัง WASM มันจะแชร์หน่วยความจำเดียวกัน - ไม่มีการคัดลอก ฟังก์ชัน Rust แก้ไขพิกเซลแบบ In-place และฝั่ง JavaScript จะเห็นการเปลี่ยนแปลงทันที

ระดับต่ำ: การ Instantiate WASM แบบ Manual

ถ้าคุณไม่ต้องการใช้ wasm-bindgen คุณสามารถ Instantiate โมดูล WASM โดยตรง:

const response = await fetch("calculator.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response, {
  env: {
    // Functions the WASM module can call
    log_result: (value) => console.log("Result:", value),
  },
});

// Call exported functions
const { add, multiply } = instance.exports;
console.log(add(5, 3));       // 8
console.log(multiply(4, 7));  // 28

วิธีนี้มีประโยชน์เมื่อคุณต้องการ Overhead น้อยที่สุดและไม่ต้องการ Rich Type Interop

ประสิทธิภาพ: WASM vs JavaScript

Benchmark ในโลกจริงแสดงการเร่งความเร็วอย่างมีนัยสำคัญสำหรับงานที่ใช้ CPU มาก:

งาน	JavaScript	WASM	เร็วขึ้น
การประมวลผลภาพ 4K	180ms	8ms (พร้อม SIMD)	22 เท่า
ปรับขนาดภาพ (4K)	250ms	45ms	5.5 เท่า
การจำลองฟิสิกส์ (1 หมื่น Entity)	เฟรมตก	60fps ลื่นไหล	ประมาณ 10 เท่า
การ Parse JSON (Payload ขนาดใหญ่)	12ms	3ms	4 เท่า
การ Hash เชิงเข้ารหัสลับ	45ms	6ms	7.5 เท่า

WASM ทำงานที่ประมาณ 95% ของความเร็ว Native Code ข้อได้เปรียบที่ใหญ่ที่สุดมาจาก:

• ประสิทธิภาพที่คาดเดาได้ (ไม่มี JIT Warmup, ไม่มี GC Pause)
• คำสั่ง SIMD สำหรับการประมวลผลข้อมูลแบบขนาน
• การเข้าถึงหน่วยความจำโดยตรงโดยไม่มีการแทรกแซงจาก Garbage Collector

จุดที่ WASM ไม่เร็วกว่า: การจัดการ DOM, การคำนวณขนาดเล็ก, งานที่มี I/O เป็นคอขวด JavaScript ถูกปรับแต่งมาเป็นอย่างดีสำหรับสิ่งเหล่านี้แล้ว

กรณีการใช้งานจริง

Figma: การเรนเดอร์เวกเตอร์แบบเรียลไทม์

เอนจิ้นเรนเดอร์หลักของ Figma เป็น C++ ที่คอมไพล์เป็น WASM ทุกรูปทรง, Gradient และเอฟเฟกต์ถูกคำนวณใน WASM และวาดลงบน Canvas Element สิ่งนี้ทำให้ Figma สามารถจัดการดีไซน์ที่ซับซ้อนที่มีหลายพัน Layer ที่ 60fps ในเบราว์เซอร์ได้ - ประสิทธิภาพที่เป็นไปไม่ได้ด้วย JavaScript ล้วน

Adobe Photoshop บนเว็บ

Adobe ย้ายฟิลเตอร์และเครื่องมือสำคัญของ Photoshop มาเป็น WASM โดยใช้ Rust Benchmark ของพวกเขาแสดงการประมวลผลภาพ 4K ใน 22ms ด้วย WASM SIMD เทียบกับ 180ms ใน JavaScript - เร็วขึ้น 8 เท่าที่ทำให้การดูตัวอย่างฟิลเตอร์แบบเรียลไทม์เป็นไปได้

Cloudflare Workers

Cloudflare รันโมดูล WASM ใน V8 Isolate ข้ามกว่า 330 Edge Location Cold Start ใช้เวลา 1-5ms (เทียบกับ 100-500ms สำหรับ Serverless แบบ Container) ในเดือนกุมภาพันธ์ 2026 พวกเขาได้ Deploy การ Inference ของ Llama-3-8b ข้ามเครือข่าย Edge ด้วย WASM

Google Meet

Background Blur และ Virtual Background ใน Google Meet ใช้ WASM กับ SIMD สำหรับการประมวลผลวิดีโอแบบเรียลไทม์ โมดูล WASM ประมวลผลแต่ละเฟรมวิดีโอเร็วพอที่จะรักษาวิดีโอที่ลื่นไหลที่ 30fps

การรองรับเบราว์เซอร์ (2026)

ฟีเจอร์	Chrome	Firefox	Safari	Edge
Core WASM	เต็มรูปแบบ	เต็มรูปแบบ	เต็มรูปแบบ	เต็มรูปแบบ
Threads	รองรับ	รองรับ	รองรับ	รองรับ
SIMD (128 บิต)	รองรับ	รองรับ	รองรับ	รองรับ
WasmGC	119+	120+	18.2+	รองรับ
Exception Handling	รองรับ	รองรับ	รองรับ	รองรับ
Memory64	รองรับ	รองรับ	บางส่วน	รองรับ

เบราว์เซอร์หลักทุกตัวรองรับ WASM อย่างเต็มรูปแบบ ฟีเจอร์ที่ใหม่กว่า (WasmGC, Exception Handling) ได้รับการรองรับอย่างกว้างขวางแล้ว

เครื่องมืออ้างอิง

เครื่องมือ	วัตถุประสงค์	การติดตั้ง
wasm-pack	Build Rust เป็น WASM, สร้างแพ็กเกจ npm	cargo install wasm-pack
wasm-bindgen	Rust/JS Interop Binding (ใช้โดย wasm-pack)	Dependency ใน Cargo.toml
wasm-opt	ปรับแต่งขนาดไบนารี (ลดได้ 50% ขึ้นไป)	ส่วนหนึ่งของ Binaryen: brew install binaryen
wit-bindgen	สร้าง Binding จากไฟล์ WIT	cargo install wit-bindgen-cli
Wasmtime	WASM Runtime ฝั่งเซิร์ฟเวอร์ (WASI Reference Implementation)	brew install wasmtime
Wasmer	WASM Runtime ทางเลือกที่รองรับ WASI	curl https://get.wasmer.io -sSfL | sh
wasm-feature-detect	ตรวจจับฟีเจอร์เบราว์เซอร์ตอน Runtime	npm install wasm-feature-detect

ปรับแต่งขนาดไบนารี

ไบนารี WASM อาจมีขนาดใหญ่ นี่คือวิธีลดขนาด:

# Cargo.toml
[profile.release]
opt-level = "z"     # Optimize for size
lto = true          # Link-time optimization
codegen-units = 1   # Better optimization, slower compile
strip = true        # Strip debug symbols

# Build in release mode
wasm-pack build --release --target web

# Further optimize with wasm-opt
wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm

โมดูล Rust WASM ทั่วไปจะลดจาก 500KB เหลือต่ำกว่า 50KB ด้วยการปรับแต่งเหล่านี้

แผนงานเริ่มต้น

สรุป

WebAssembly ไม่ใช่เทคโนโลยีทดลองอีกต่อไป มันเป็นเทคโนโลยีที่ใช้ในโปรดักชันโดยแอปพลิเคชันที่ต้องการประสิทธิภาพสูงสุดบนเว็บ ประสิทธิภาพใกล้เคียง Native, ความปลอดภัยแบบ Sandbox และความสามารถในการพกพาที่เป็นสากล - ไม่มี Compilation Target อื่นใดที่ให้ทั้งสามสิ่งนี้

คุณไม่จำเป็นต้องเขียนแอปพลิเคชันทั้งหมดใหม่ด้วย WASM เริ่มจากฟังก์ชันที่ใช้ CPU มากเพียงหนึ่งฟังก์ชัน - ฟิลเตอร์ภาพ, ตัวแยกวิเคราะห์ข้อมูล, การคำนวณฟิสิกส์ - คอมไพล์เป็น WASM แล้วเรียกจาก JavaScript วัดความแตกต่าง จากนั้นตัดสินใจว่า WASM จะช่วยตรงไหนอีก

เครื่องมือมีความเติบโตแล้ว การรองรับเบราว์เซอร์เป็นสากล และระบบนิเวศกำลังเติบโต ถ้าคุณเขียน Rust อยู่แล้ว คุณอยู่ห่างจากเบราว์เซอร์เพียงคำสั่งเดียว

รายการตรวจสอบเริ่มต้น:

• ติดตั้ง Rust และ wasm-pack แล้ว
• Build โมดูล WASM แรกและรันในเบราว์เซอร์ได้
• การเชื่อมต่อ JavaScript ทำงาน (เรียก WASM จาก JS)
• Release Build พร้อมการปรับแต่งขนาดถูกนำไปใช้
• Benchmark ประสิทธิภาพเทียบกับ JavaScript ล้วน
• สำรวจ WASI ด้วย Wasmtime สำหรับการใช้งานฝั่งเซิร์ฟเวอร์