WebAssembly (WASM) Nedir: Tarayıcıda Yüksek Performans

JavaScript, karmaşık görüntü işleme, gerçek zamanlı ses kodlama ve ağır fizik simülasyonu gibi işlerde performans olarak yetersiz kalıyor. WebAssembly (kısaca Wasm), bu boşluğu dolduran bir teknoloji; C, C++ ve Rust gibi dillerde yazılmış kodu tarayıcıda neredeyse yerel hızda çalıştırıyor. Bu yazıda Wasm'ın ne olduğunu, JavaScript ile nasıl birlikte çalıştığını ve hangi projelerde gerçek bir fark yarattığını ele alıyoruz.

WebAssembly nedir

WebAssembly, tarayıcıda çalıştırılabilen düşük seviyeli, ikili bir bayt kodu formatıdır. JavaScript metin olarak ayrıştırılıp yorumlanırken, Wasm modülleri kompakt ikili biçimde gelir ve çok daha hızlı yüklenip çalışır. Teknik detaylar ve resmi spesifikasyon MDN Web Docs'un WebAssembly bölümünde yer alıyor.

Wasm'ın temel amacı, JavaScript dışındaki dillerde yazılmış kodu web'e taşımaktır. Rust ile yazılmış bir sıkıştırma kütüphanesi ya da C++ ile yazılmış bir görüntü filtresi, derlenip doğrudan tarayıcıda çalıştırılabilir. Bu sayede önceden yalnızca masaüstü uygulamalarında mümkün olan performans, web sayfasına taşınır.

Wasm dosyaları genelde .wasm uzantısıyla dağıtılır ve tarayıcı tarafından ya doğrudan yorumlanır ya da çalıştırılmadan önce JIT (just-in-time) derleyiciyle makine koduna çevrilir. Bu iki aşamalı yaklaşım, hızlı başlangıç ile yüksek çalışma zamanı performansı arasında bir denge kurar.

Neden önemli: JavaScript'in sınırları

JavaScript esnektir ve her yerde çalışır ama yoğun hesaplama gerektiren işlerde performans tavanına takılır. Bir video kodlayıcı ya da fizik motoru JavaScript'te yazıldığında, tarayıcının yorumlama ve çöp toplama (garbage collection) yükü performansı gözle görülür biçimde düşürür. Wasm bu yükü büyük ölçüde ortadan kaldırır, çünkü kod önceden derlenmiş ikili formatta gelir.

Bu performans farkı, web'de önceden pratik olmayan uygulama kategorilerini mümkün kılar. Oyun motorları, video düzenleyiciler, CAD araçları ve bilimsel simülasyonlar artık kurulum gerektirmeden tarayıcıda çalışıyor. AutoCAD'in web sürümü ve Figma'nın render motoru, bu yaklaşımın somut örnekleri arasında.

Wasm ve JavaScript birlikte nasıl çalışıyor

Wasm, JavaScript'in yerini almaz; onu tamamlar. Tipik bir uygulamada JavaScript arayüzü DOM etkileşimlerini ve API çağrılarını yönetirken, Wasm modülü ağır hesaplama gerektiren kısmı üstlenir. Bir Wasm modülünü tarayıcıda çalıştırmanın temel akışı şöyledir:

fetch('modul.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(result => {
    const { hesapla } = result.instance.exports;
    console.log(hesapla(42));
  });

WebAssembly.instantiate fonksiyonu ikili modülü belleğe yükler ve içindeki fonksiyonları JavaScript'e "export" eder. Bu sayede JavaScript tarafında Wasm fonksiyonları sıradan bir fonksiyon çağrısı gibi kullanılır; performans kritik kısım Wasm'da, geri kalan mantık JavaScript'te kalır.

Bu kademeli yaklaşımın pratik bir avantajı var: mevcut bir JavaScript uygulamasını baştan yazmaya gerek kalmaz. Darboğaz olan fonksiyon Rust ya da C++'a taşınıp Wasm'a derlenir, geri kalan kod aynı kalır. Bu, riski düşük tutarken performans kazanmanın en yaygın yoludur.

Veri alışverişinde bilinmesi gereken bir sınır daha var: Wasm modülleri JavaScript nesnelerine doğrudan erişemez, sayılar ve ham bellek (linear memory) üzerinden iletişim kurar. Karmaşık veri yapıları (diziler, metinler) paylaşılacaksa, bunlar bellekte kodlanıp göstericiler (pointer) üzerinden aktarılır. Bu sınırlama ilk bakışta külfetli görünse de, wasm-bindgen gibi araçlar bu dönüşümü büyük ölçüde otomatikleştirir.

Hangi projelerde kullanılıyor

Wasm'ın değer kattığı alanlar nettir; hepsi hesaplama açısından ağır işlerdir.

Bu tablodaki her satır aynı fikri taşır: masaüstünde mümkün olan, artık tarayıcıda da mümkündür. Google Earth'ün web sürümü, C++ kod tabanının büyük kısmını Wasm'a taşıyarak tarayıcıda çalışır hale geldi; bu tür taşımalar, sıfırdan yeniden yazmaktan çok daha az risk taşır.

Performans, taşınabilirlik ve güvenlik

Wasm'ın en somut avantajı performanstır: yerel hıza yakın çalışma, hesaplama yoğun görevlerde JavaScript'e göre kayda değer bir fark yaratır. Taşınabilirlik de en az performans kadar değerlidir; aynı .wasm dosyası Chrome, Firefox, Safari ve Edge'de aynı şekilde çalışır, tarayıcıya özel kod yazmaya gerek kalmaz.

Güvenlik tarafında Wasm, tarayıcının korumalı alan (sandbox) modelini aynen miras alır. Bir Wasm modülü sistem dosyalarına ya da belleğin izin verilmeyen bölgelerine doğrudan erişemez; tüm işlemler tarayıcının kontrolünden geçer. Bu, C/C++ gibi bellek yönetimi hataya açık dillerden gelen kodun bile web'de görece güvenli çalışmasını sağlar.

Yükleme performansı da gözden kaçmaması gereken bir ayrıntıdır. İkili format, metin tabanlı JavaScript'ten çok daha hızlı ayrıştırılır; büyük uygulamalarda bu fark ilk yükleme süresine doğrudan yansır. Küçük ve orta ölçekli sitelerde bu avantaj pek hissedilmez, ama karmaşık web uygulamalarında ciddi bir başlangıç hızı kazancı sağlar.

Nasıl başlanır

Wasm ile çalışmak için önce bir kaynak dil seçmek gerekir; en yaygın seçenekler Rust, C++ ve AssemblyScript'tir (JavaScript'e benzer sözdizimiyle Wasm'a derlenen bir dil). Rust ekosisteminde wasm-pack aracı, derleme sürecini büyük ölçüde otomatikleştirir:

cargo install wasm-pack
wasm-pack build --target web

Bu komut, Rust kodunu .wasm dosyasına derler ve tarayıcıda kullanılacak JavaScript "glue" kodunu otomatik üretir. C/C++ tarafında Emscripten araç zinciri benzer bir rol oynar; mevcut C++ kod tabanlarını Wasm'a taşımak için en olgun seçenek budur.

Küçük bir fonksiyonla başlamak öğrenme eğrisini yönetilebilir tutar. Basit bir matematiksel hesaplamayı Rust'ta yazıp Wasm'a derlemek ve JavaScript'ten çağırmak, tüm iş akışını uçtan uca görmenin en hızlı yoludur; buradan sonra gerçek bir darboğazı taşımak çok daha kolay hale gelir.

Tarayıcı geliştirici araçları da Wasm hata ayıklamayı destekler. Chrome DevTools ve Firefox Developer Tools, kaynak haritaları (source maps) etkinleştirildiğinde Wasm modülünün orijinal Rust ya da C++ koduna göre adım adım incelenmesine izin verir. Bu, Wasm'ı normal bir geliştirme sürecinin parçası haline getirir.

Tarayıcının ötesi: WASI ve sunucu tarafı

Wasm başlangıçta tarayıcı için tasarlandı ama kapsamı hızla genişledi. WASI (WebAssembly System Interface) standardı sayesinde Wasm modülleri artık sunucu tarafında, kenar bilişim (edge computing) ortamlarında ve bulut fonksiyonlarında da çalışıyor. Cloudflare Workers ve Fastly gibi platformlar, Wasm'ı tarayıcı dışı bir çalışma zamanı olarak kullanıyor.

Bu genişleme, Wasm'ı yalnızca bir web teknolojisi olmaktan çıkarıp taşınabilir, güvenli ve hızlı bir genel amaçlı çalışma zamanına dönüştürüyor. Wasm'a bir kez derlenen kod, tarayıcıda da sunucuda da aynı davranışı sergiler; bu tutarlılık, farklı ortamlar için ayrı kod yazma ihtiyacını azaltır. Ekosistem olgunlaştıkça dil desteği ve araç kalitesi de düzenli olarak iyileşiyor.

Docker ile karşılaştırıldığında Wasm modülleri çok daha küçük boyutta ve çok daha hızlı başlar; bir konteynerin saniyeler süren başlatma süresine karşılık, bir Wasm modülü milisaniyeler içinde ayağa kalkar. Bu fark, kenar bilişim gibi gecikmenin kritik olduğu senaryolarda gerçek bir avantaja dönüşür.

Yazan Celil Uyanikoglu

25 yıldır bilgi işlem piyasasında farklı dallarda uzmanlaşan bir Bilgisayar Mühendisi