0Pricing
WebAssembly (WASM) for High Performance Apps · درس

SharedArrayBuffer والعمليات الذرية لـWASM

استخدم SharedArrayBuffer والعمليات الذرية لإتاحة وصول فعّال ومتزامن إلى البيانات بين خيوط WASM المتعددة

SharedArrayBuffer والعمليات الذرية لـWASM درس مجاني في WebAssembly (WASM) for High Performance Apps على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في WebAssembly (WASM) for High Performance Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Sharing Data Safely in WASM

When building high-performance applications with WebAssembly (WASM), you often need to share data between different parts of your program, especially across multiple threads (Web Workers).

Directly sharing memory can lead to problems like race conditions, where multiple threads try to access and modify the same data at the same time, causing unpredictable results.

This lesson introduces SharedArrayBuffer and atomic operations, essential tools for safe and efficient data sharing in multithreaded WASM applications.

What is SharedArrayBuffer?

A SharedArrayBuffer is a special type of data buffer in JavaScript that can be shared between the main thread and Web Workers.

  • Unlike a regular ArrayBuffer, which can only be transferred (copied) to a worker, a SharedArrayBuffer provides a shared memory space.
  • This means all threads accessing it see the same data at the same time, without needing to copy it back and forth.
  • It's the foundation for enabling true multithreading with WASM in web environments.

JS: Allocating Shared Memory

You create a SharedArrayBuffer on the JavaScript side, just like a regular ArrayBuffer, but using the SharedArrayBuffer constructor.

Once created, you can create typed array views (e.g., Uint32Array) to read and write data. This buffer can then be passed to Web Workers.

Here's how you might set one up in JavaScript:

// In JavaScript:
const sharedBuffer = new SharedArrayBuffer(1024); // 1KB shared memory
const view = new Uint32Array(sharedBuffer); // A view to work with

// Now, 'sharedBuffer' can be passed to Web Workers
// worker.postMessage({ sharedBuffer });

WASM modules loaded in these workers can then access this shared memory.

WASM's View of Shared Memory

When a SharedArrayBuffer is passed to a Web Worker, and a WebAssembly module is instantiated with a WebAssembly.Memory object that uses this shared buffer, the WASM module gains direct access to it.

  • WASM sees this shared memory as its own linear memory.
  • Any reads or writes by the WASM module to its linear memory are directly reflected in the SharedArrayBuffer.
  • This allows WASM instances running in different workers to operate on the exact same data in real-time.

The Problem: Race Conditions

Imagine two Web Workers, each running a WASM module, trying to increment a shared counter in a SharedArrayBuffer.

If both workers read the current value, increment it, and then write it back without coordination, you can have a race condition:

  • Worker A reads 0.
  • Worker B reads 0.
  • Worker A increments 0 to 1 and writes 1.
  • Worker B increments 0 to 1 and writes 1.

The counter should be 2, but it ends up as 1! This is where atomic operations become crucial.

Atomic Operations to the Rescue!

Atomic operations are special instructions that guarantee an operation completes entirely without interruption from other threads.

They are "all or nothing" – either the entire operation finishes successfully, or it doesn't happen at all, preventing partial updates and race conditions.

Key characteristics:

  • Indivisible: Cannot be interrupted by another thread.
  • Guaranteed: Ensures data integrity in concurrent access.
  • Essential: For building reliable multithreaded applications.

Rust: Atomic Increment for WASM

Rust provides atomic types (like AtomicU32, AtomicI64) in its std::sync::atomic module. These can be used when compiling to WebAssembly.

When compiled to WASM, these operations translate to the underlying WebAssembly atomic instructions, which operate safely on shared linear memory.

Here's a simple Rust example demonstrating an atomic counter that could be part of a WASM module:

use std::sync::atomic::{AtomicU32, Ordering};

// A static atomic counter within the WASM module.
// In a full shared memory setup, this would conceptually map
// to an offset within the SharedArrayBuffer passed from JS.
static GLOBAL_COUNTER: AtomicU32 = AtomicU32::new(0);

#[no_mangle]
pub extern "C" fn increment_counter_atomic(amount: u32) -> u32 {
    // Atomically add 'amount' to GLOBAL_COUNTER.
    // Ordering::SeqCst ensures sequential consistency.
    GLOBAL_COUNTER.fetch_add(amount, Ordering::SeqCst);
    // Return the new value (after incrementing)
    GLOBAL_COUNTER.load(Ordering::SeqCst)
}

#[no_mangle]
pub extern "C" fn get_current_counter_atomic() -> u32 {
    // Atomically load the current value.
    GLOBAL_COUNTER.load(Ordering::SeqCst)
}

JS: The Atomics Object

JavaScript also has its own Atomics object, which provides static methods for performing atomic operations directly on SharedArrayBuffer views.

This allows the JavaScript main thread or Web Workers to perform atomic operations on the shared memory, coordinating with WASM modules.

  • Atomics.add(view, index, value): Atomically adds value to the element at index in view.
  • Atomics.load(view, index): Atomically loads the value at index.
  • Atomics.store(view, index, value): Atomically stores value at index.

These methods are crucial for JavaScript to safely interact with WASM's shared memory.

Synchronization with Wait/Notify

Beyond simple read/write operations, Atomics also provides methods for more advanced thread synchronization:

  • Atomics.wait(view, index, expectedValue, timeout): Allows a thread to sleep (block) until a specific memory location (view[index]) no longer holds expectedValue, or a timeout occurs.
  • Atomics.notify(view, index, count): Wakes up one or more threads that are waiting on the specified memory location.

These are powerful tools for building complex multithreaded patterns, like producer-consumer queues, where threads need to pause and resume based on shared data changes.

Building a Concurrent Counter

Combining SharedArrayBuffer and atomic operations, you can build robust concurrent applications. For example, a shared counter:

  • JavaScript: Creates a SharedArrayBuffer and an Uint32Array view.
  • Web Workers: Each worker receives the SharedArrayBuffer and instantiates a WASM module.
  • WASM Module: The WASM code (like our Rust example) uses atomic operations to increment a specific index within its linear memory, which is backed by the SharedArrayBuffer.

This setup ensures that even with multiple threads rapidly incrementing the counter, the final value will always be correct, free from race conditions.

Check Your Understanding

What are the key benefits of using SharedArrayBuffer and atomic operations in WebAssembly?

Recap: Shared Memory & Atomics

We've explored how SharedArrayBuffer enables true shared memory between JavaScript threads and WebAssembly modules, paving the way for multithreaded WASM applications.

Crucially, we learned that atomic operations are indispensable for safely managing this shared memory, preventing race conditions and ensuring data consistency when multiple threads access and modify the same data concurrently.

Mastering these concepts is vital for building high-performance, reliable WebAssembly applications that leverage the full power of modern multi-core processors.

الأسئلة الشائعة

هل درس «SharedArrayBuffer والعمليات الذرية لـWASM» مجاني؟

نعم — نص درس «SharedArrayBuffer والعمليات الذرية لـWASM» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة WebAssembly (WASM) for High Performance Apps، انتقل إلى CoddyKit PRO. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.

ماذا ستتعلم في «SharedArrayBuffer والعمليات الذرية لـWASM»؟

استخدم SharedArrayBuffer والعمليات الذرية لإتاحة وصول فعّال ومتزامن إلى البيانات بين خيوط WASM المتعددة تتمرن على WebAssembly (WASM) for High Performance Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ WebAssembly (WASM) for High Performance Apps؟

لا تُشترط خبرة سابقة. WebAssembly (WASM) for High Performance Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «SharedArrayBuffer والعمليات الذرية لـWASM»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس WebAssembly (WASM) for High Performance Apps هذا؟

نعم. كل درس في WebAssembly (WASM) for High Performance Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. Web Workers مع خيوط WASM
  2. SharedArrayBuffer والعمليات الذرية لـWASM
  3. تصميم تطبيقات WASM المتزامنة
  4. تمرير الرسائل والقنوات بين خيوط WASM
← العودة إلى WebAssembly (WASM) for High Performance Apps