WebAssembly ile Tarayıcıda Yüksek Performanslı Uygulama

WebAssembly Nedir?

WebAssembly (kısaca Wasm), modern web tarayıcılarında yerel (native) performansa yakın hızda kod çalıştırmayı mümkün kılan düşük seviyeli bir ikili (binary) komut formatıdır. 2017 yılında tüm büyük tarayıcılar tarafından desteklenmeye başlanan WebAssembly, JavaScript'in performans sınırlamalarını aşmak isteyen geliştiriciler için devrim niteliğinde bir teknoloji olmuştur.

Wasm, C, C++, Rust, Go ve AssemblyScript gibi dillerden derlenerek üretilir. Tarayıcının sanal makinesinde (VM) çalışan bu format, özellikle yoğun hesaplama gerektiren uygulamalarda JavaScript'e kıyasla çarpıcı performans artışları sağlar.

Neden WebAssembly Kullanmalısınız?

• Yüksek performans: Düşük seviyeli ikili format sayesinde, tarayıcı motoru kodu çok daha hızlı ayrıştırır ve çalıştırır. JavaScript'in JIT (Just-In-Time) derleme sürecindeki belirsizlikler ortadan kalkar.
• Taşınabilirlik: Wasm modülleri platformdan bağımsızdır. Aynı .wasm dosyası Windows, macOS, Linux ve mobil tarayıcılarda sorunsuz çalışır.
• Güvenlik: WebAssembly, sandboxed (korumalı alan) bir ortamda çalışır. Doğrudan bellek erişimi veya sistem çağrıları yapamaz; yalnızca tarayıcının sunduğu API'ler aracılığıyla dış dünyayla iletişim kurar.
• Mevcut kod tabanlarını yeniden kullanma: On yıllardır C/C++ ile yazılmış kütüphaneleri doğrudan web'e taşıyabilirsiniz. Örneğin FFmpeg, SQLite ve OpenCV gibi projeler Wasm'a derlenebilir.
• JavaScript ile entegrasyon: Wasm, JavaScript'in yerini almaz; onu tamamlar. Her iki teknoloji aynı sayfa içinde sorunsuz bir şekilde birlikte çalışabilir.

WebAssembly Kullanım Alanları

WebAssembly'nin gerçek gücü, belirli kullanım senaryolarında ortaya çıkar:

1. Oyun motorları: Unity ve Unreal Engine gibi motorlar Wasm hedefine derlenerek tarayıcıda AAA kalitesine yakın oyunlar sunabilir.
2. Görüntü ve video işleme: Gerçek zamanlı filtre uygulama, video kodlama/çözme gibi yoğun hesaplama gerektiren işlemler.
3. Bilimsel hesaplama ve simülasyon: Fizik simülasyonları, veri analizi ve makine öğrenmesi çıkarımları (inference).
4. CAD ve 3D modelleme: AutoCAD, Figma gibi uygulamalar WebAssembly kullanarak tarayıcıda masaüstü düzeyinde performans sunar.
5. Kriptografi: Şifreleme ve hash hesaplamaları gibi CPU-yoğun operasyonlar.

Rust ile İlk WebAssembly Modülünüzü Oluşturma

Rust, güçlü bellek güvenliği garantileri ve sıfır maliyetli soyutlamalarıyla WebAssembly geliştirme için en popüler dillerden biridir. wasm-pack aracı sayesinde Rust kodunu Wasm'a derlemek oldukça kolaydır.

Ortam Kurulumu

Öncelikle gerekli araçları kuralım:

# Rust kurulumu
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# wasm-pack kurulumu
cargo install wasm-pack

# Yeni proje oluşturma
cargo new --lib wasm-hesaplama
cd wasm-hesaplama

Cargo.toml Yapılandırması

Cargo.toml dosyasına aşağıdaki bağımlılıkları ekleyin:

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

[dependencies]
wasm-bindgen = "0.2"

Rust Kodu

src/lib.rs dosyasını aşağıdaki gibi düzenleyin. Bu örnekte, Fibonacci hesaplama ve matris çarpımı gibi CPU-yoğun işlemleri Wasm'a taşıyoruz:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 {
        return n as u64;
    }
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 2..=n {
        let temp = b;
        b = a + b;
        a = temp;
    }
    b
}

#[wasm_bindgen]
pub fn matris_carpimi(a: &[f64], b: &[f64], boyut: usize) -> Vec<f64> {
    let mut sonuc = vec![0.0; boyut * boyut];
    for i in 0..boyut {
        for j in 0..boyut {
            let mut toplam = 0.0;
            for k in 0..boyut {
                toplam += a[i * boyut + k] * b[k * boyut + j];
            }
            sonuc[i * boyut + j] = toplam;
        }
    }
    sonuc
}

Derleme

Projeyi Wasm'a derlemek için şu komutu çalıştırın:

wasm-pack build --target web

Bu komut, pkg/ dizini altında .wasm dosyasını ve JavaScript bağlama (binding) dosyalarını üretir.

JavaScript Tarafında Wasm Modülünü Kullanma

Derlenen modülü bir HTML sayfasında şu şekilde kullanabilirsiniz:

<script type="module">
  import init, { fibonacci, matris_carpimi } from './pkg/wasm_hesaplama.js';

  async function calistir() {
    await init();

    // Fibonacci performans testi
    const baslangic = performance.now();
    const sonuc = fibonacci(45);
    const sure = performance.now() - baslangic;
    console.log(`Fibonacci(45) = ${sonuc}, Süre: ${sure.toFixed(2)}ms`);

    // Aynı hesaplamayı JavaScript ile karşılaştırma
    const jsBaslangic = performance.now();
    let a = 0n, b = 1n;
    for (let i = 2; i <= 45; i++) {
      [a, b] = [b, a + b];
    }
    const jsSure = performance.now() - jsBaslangic;
    console.log(`JS Fibonacci(45) = ${b}, Süre: ${jsSure.toFixed(2)}ms`);
  }

  calistir();
</script>

Performans Karşılaştırması ve Optimizasyon İpuçları

WebAssembly her durumda JavaScript'ten hızlı değildir. Performans farkı genellikle şu senaryolarda belirginleşir:

• Yoğun döngüler ve matematiksel hesaplamalar: Wasm, bu tür işlemlerde JavaScript'e kıyasla 2-10 kat hız artışı sağlayabilir.
• Bellek yoğun işlemler: Lineer bellek modeli sayesinde, büyük veri yapıları üzerinde daha öngörülebilir performans sunar.
• DOM manipülasyonu: Bu alanda Wasm avantaj sağlamaz çünkü JavaScript köprüsü üzerinden geçmek ek maliyet yaratır.

Optimizasyon Stratejileri

• Sınır geçişlerini minimize edin: JavaScript ile Wasm arasındaki veri transferini azaltın. Küçük parçalar yerine büyük veri blokları gönderin.
• SharedArrayBuffer kullanın: Web Worker'lar ile birlikte SharedArrayBuffer kullanarak bellek kopyalama maliyetini ortadan kaldırabilirsiniz.
• SIMD talimatlarından yararlanın: WebAssembly SIMD (Single Instruction, Multiple Data) önerisi, vektör işlemleri için donanım düzeyinde hızlandırma sağlar.
• wasm-opt ile ikili boyutu küçültün: wasm-opt -O3 -o output.wasm input.wasm komutuyla modül boyutunu önemli ölçüde azaltabilirsiniz.
• Lazy loading uygulayın: Wasm modüllerini sayfa yüklenirken değil, ihtiyaç duyulduğunda yükleyin.

WASI ve WebAssembly'nin Geleceği

WASI (WebAssembly System Interface), Wasm'ı tarayıcı dışına taşıyan bir standart arayüzdür. WASI sayesinde WebAssembly modülleri dosya sistemi, ağ ve diğer sistem kaynaklarına güvenli bir şekilde erişebilir. Bu gelişme, Wasm'ı yalnızca bir tarayıcı teknolojisi olmaktan çıkarıp evrensel bir çalışma zamanı (runtime) haline getirmektedir.

Yakın gelecekte beklenen önemli gelişmeler şunlardır:

• Garbage Collection (GC) desteği: Java, Kotlin ve Dart gibi GC gerektiren dillerin Wasm'a daha verimli derlenmesini sağlayacak.
• Component Model: Farklı dillerde yazılmış Wasm modüllerinin birbirleriyle sorunsuz iletişim kurmasını mümkün kılacak.
• Exception Handling: Yerel istisna yönetimi desteği, hata ayıklamayı ve hata yönetimini iyileştirecek.
• Thread desteği: Gerçek çoklu iş parçacığı (multithreading) desteği ile paralel hesaplama performansı artacak.

Sonuç

WebAssembly, web platformunun sınırlarını genişleten güçlü bir teknolojidir. Doğru kullanım senaryolarında — yoğun hesaplama, oyunlar, medya işleme ve mevcut kod tabanlarının web'e taşınması gibi alanlarda — çarpıcı performans kazanımları sunar. JavaScript ile rekabet etmek yerine onu tamamlayan bir araç olarak düşünülmeli ve her iki teknolojinin güçlü yönleri bir arada değerlendirilmelidir. Rust veya C++ bilginiz varsa, bugün bir Wasm projesi başlatmak için harika bir zamandır.