⏱️3 min read · 636 words
انتقل WebAssembly (Wasm) من مرحلة الاختبار التجريبي إلى مرحلة الاستعداد للإنتاج في عام 2026. وتقوم المتصفحات والخوادم (عبر WASI) وحوسبة الحافة بتشغيل Wasm. مع الانتهاء من نموذج المكون واللغات الرئيسية (Rust، Go، Python، C++) التي تدعم أهداف Wasm، أصبح وعد “الكتابة مرة واحدة، والتشغيل في أي مكان” حقيقيًا أخيرًا بالنسبة للتعليمات البرمجية ذات الأداء الحرج. يغطي هذا الدليل كل شيء بدءًا من الأساسيات وحتى نشر الإنتاج.
📋 Table of Contents
لماذا WebAssembly؟
- أداء قريب من السكان الأصليين— أبطأ بمقدار 1.5x-2x من لغة C الأصلية، وأسرع بمقدار 10-100x من JavaScript للمهام التي تتطلب استخدامًا مكثفًا لوحدة المعالجة المركزية (CPU)
- إمكانية نقل اللغة— قم بتشغيل كود Rust وC/C++ وGo في المتصفح أو الخادم
- وضع الحماية الأمنية– نموذج أمني صارم قائم على القدرات
- WASI (واجهة نظام WebAssembly)– تشغيل Wasm خارج المتصفح (الخوادم، الحافة، CLI)
- نموذج المكون– وحدات قابلة للتشغيل المتبادل عبر اللغات
الصدأ إلى WebAssembly
# Install wasm-pack
cargo install wasm-pack
# Add wasm target
rustup target add wasm32-unknown-unknown
# Create a Wasm library
cargo new --lib fast_crypto
cd fast_crypto# Cargo.toml
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
getrandom = { version = "0.2", features = ["js"] }
sha2 = "0.10"
hex = "0.4"
[profile.release]
opt-level = 3
lto = true
codegen-units = 1// src/lib.rs
use wasm_bindgen::prelude::*;
use sha2::{Sha256, Digest};
#[wasm_bindgen]
pub fn hash_sha256(data: &str) -> String {
let mut hasher = Sha256::new();
hasher.update(data.as_bytes());
hex::encode(hasher.finalize())
}
#[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 {
(a, b) = (b, a.wrapping_add(b));
}
b
}
// Struct exposed to JavaScript
#[wasm_bindgen]
pub struct ImageProcessor {
width: u32,
height: u32,
pixels: Vec<u8>,
}
#[wasm_bindgen]
impl ImageProcessor {
#[wasm_bindgen(constructor)]
pub fn new(width: u32, height: u32) -> Self {
Self { width, height, pixels: vec![0u8; (width * height * 4) as usize] }
}
pub fn grayscale(&mut self) {
for chunk in self.pixels.chunks_mut(4) {
let gray = (0.299 * chunk[0] as f32 + 0.587 * chunk[1] as f32 + 0.114 * chunk[2] as f32) as u8;
chunk[0] = gray; chunk[1] = gray; chunk[2] = gray;
}
}
pub fn pixels(&self) -> *const u8 {
self.pixels.as_ptr()
}
}# Build for browser
wasm-pack build --target web
# Generated:
# pkg/
# fast_crypto_bg.wasm
# fast_crypto.js (JS bindings)
# fast_crypto.d.ts (TypeScript types)استخدام Wasm في JavaScript/TypeScript
// Using wasm-pack generated bindings
import init, { hash_sha256, fibonacci, ImageProcessor } from './pkg/fast_crypto.js';
async function main() {
// Must initialize Wasm module first
await init();
// Call Wasm functions directly
const hash = hash_sha256("Hello, WebAssembly!");
console.log("SHA256:", hash);
const fib = fibonacci(50);
console.log("Fibonacci(50):", fib);
// Use Wasm class
const processor = new ImageProcessor(800, 600);
processor.grayscale();
// Performance comparison
console.time("wasm-hash");
for (let i = 0; i < 100000; i++) hash_sha256(`test${i}`);
console.timeEnd("wasm-hash");
}
// Using with Next.js (server-side safe)
// next.config.js:
// experimental: { serverComponentsExternalPackages: ['fast_crypto'] }WASI: WebAssembly خارج المتصفح
// Run Rust-compiled Wasm on servers via Wasmtime
use std::io::{self, Read};
fn main() {
let mut input = String::new();
io::stdin().read_to_string(&mut input).unwrap();
let processed = process_data(&input);
println!("{}", processed);
}
fn process_data(data: &str) -> String {
data.to_uppercase()
}# Compile to WASI target
rustup target add wasm32-wasi
cargo build --target wasm32-wasi --release
# Run with Wasmtime (server-side Wasm runtime)
wasmtime target/wasm32-wasi/release/myapp.wasm < input.txt
# Docker with Wasm (Docker+Wasm integration)
docker run --runtime=io.containerd.wasmtime.v1 --platform=wasi/wasm myapp:latestبايثون إلى WebAssembly (Pyodide)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.js"></script>
</head>
<body>
<script>
async function runPython() {
const pyodide = await loadPyodide();
// Install packages
await pyodide.loadPackage(["numpy", "pandas"]);
// Run Python code
const result = await pyodide.runPythonAsync(`
import numpy as np
arr = np.random.rand(1000000)
arr.mean()
`);
console.log("Mean:", result);
}
runPython();
</script>
</body>
</html>Wasm على الحافة (عمال Cloudflare)
// wrangler.toml
// [build]
// command = "cargo install -q worker-build && worker-build --release"
// src/worker.rs compiled to Wasm and deployed to Cloudflare edge
// Handle 50M+ requests/day with sub-millisecond cold starts
// Worker JS + Wasm bundle
import { hash_sha256 } from './pkg/fast_crypto.js';
import wasm from './pkg/fast_crypto_bg.wasm';
export default {
async fetch(request) {
await wasm();
const body = await request.text();
const hash = hash_sha256(body);
return new Response(JSON.stringify({ hash }), {
headers: { 'Content-Type': 'application/json' }
});
}
};متى يجب استخدام WebAssembly
- المهام التي تستهلك وحدة المعالجة المركزية (CPU) بشكل مكثف: معالجة الصور/الفيديو، التشفير، استنتاج ML
- مكتبات الميناء الأصلية: FFmpeg، OpenCV، SQLite للمتصفح
- الحوسبة الحافة: عمال Cloudflare، حساب سريع
- أنظمة البرنامج المساعد: تشغيل التعليمات البرمجية غير الموثوق بها بأمان (Wasm sandbox)
- محركات اللعبة: الوحدة، جودو تجميع لWasm
لا تستخدم Wasm ل: معالجة DOM، وتطبيقات CRUD البسيطة، والتعليمات البرمجية حيث يكون أداء JS جيدًا بالفعل.
تعد WebAssembly في عام 2026 تقنية إنتاج جادة. يعد Rust + Wasm-pack أفضل مسار لمتصفح Wasm، ويتيح WASI النشر على جانب الخادم والحافة، كما يجعل نموذج المكون إمكانية التشغيل المتداخل للغة حقيقة واقعة. ابدأ بمشكلة كثيفة الاستخدام لوحدة المعالجة المركزية (CPU) والتي تعالجها JavaScript ببطء – وستؤدي مكاسب الأداء إلى جعل الاستثمار واضحًا.
🔗 Share this article
✍️ Leave a Comment