Modern frontend geliştirme manzarasında akıcı bir kullanıcı arayüzü vazgeçilmezdir. Sık sık şu ilkeyi duyarız: "Ana iş parçacığını boş tutun." Peki karmaşık bir veri dönüşümü, ağır bir kriptografik işlem veya büyük bir JSON ayrıştırma göreviniz olduğunda ne olur? Bu mantığı ana iş parçacığında çalıştırırsanız, uygulamanızın render döngüsü durur; bu da kare düşmelerine, yanıt vermeyen düğmelere ve "jank" olarak bilinen kötü bir kullanıcı deneyimine yol açar.
İşte Web Workers burada devreye girer. Tarayıcının betikleri arka plan iş parçacıklarında çalıştırma yeteneğinden yararlanarak, ağır hesaplama yükü altında bile yanıt veren bir kullanıcı arayüzü koruyabilirsiniz. Bu yazıda, ağır işleri yükten kurtarmak için Web Workers'ı etkili bir şekilde nasıl uygulayacağınızı ve uygulamalarınızın hızlı ve profesyonel kalmasını nasıl sağlayacağınızı keşfedeceğiz.
Ana İş Parçacığının Tek İş Parçacıklı Doğasını Anlamak
Tarayıcının ana iş parçacığı JavaScript'i yürütmekten, kullanıcı etkileşimlerini (tıklamalar, kaydırmalar) işlemekten ve Belge Nesne Modeli'ni (DOM) yönetmekten sorumludur. Güçlü olsa da senkron olarak çalışır. Uzun süren bir döngü veya karmaşık bir algoritma çalıştırdığınızda, tarayıcı o kod bitene kadar ekranı güncelleyemez veya giriş olaylarına yanıt veremez.
Web Workers, ana iş parçacığından bağımsız olarak çalışan ayrı iş parçacıkları oluşturarak bir çözüm sunar. Bu işçiler aynı köken (origin) politikasını paylaşır ve kullanıcı arayüzünü engellemeden ağır hesaplamalar gerçekleştirebilirler. Ana iş parçacığıyla veri bütünlüğünü sağlayarak ve yarış durumlarını önleyerek bir mesaj iletme sistemi aracılığıyla iletişim kurarlar.
İlk Web Worker'ınızı Uygulama
Bir Web Worker uygulamak basittir. İşçi mantığınızı içeren ayrı bir JavaScript dosyası oluşturursunuz. Ağır bir matematiksel hesaplama çalıştırmak istediğimizi varsayalım. math-worker.js adında bir dosya oluşturacağız.
// math-worker.js
self.onmessage = function(e) {
const data = e.data;
const result = heavyComputation(data.number);
// Sonucu ana iş parçacığına gönder
self.postMessage(result);
};
function heavyComputation(num) {
let result = 0;
for (let i = 0; i < 1e9; i++) {
result += Math.sqrt(i);
}
return num + result;
}Ardından, ana uygulama kodunuzda (örneğin app.js), işçiyi başlatır ve ona veri gönderirsiniz.
// app.js
const worker = new Worker('math-worker.js');
// İşçiden gelen mesajları dinle
worker.onmessage = function(e) {
console.log('İşçi dedi ki: ', e.data);
};
// İşçiye veri gönder
worker.postMessage({ number: 42 });Bu örnekte, ana iş parçacığı işçiye bir mesaj gönderir. İşçi, onmessage olayı aracılığıyla mesajı alır, hesaplamayı gerçekleştirir ve sonucu geri gönderir. Bu hesaplama gerçekleşirken ana iş parçacığı animasyonları render etmeye ve tıklamaları işlemeye devam edebilir.
En İyi Uygulamalar ve Optimizasyon
Web Workers güçlü olsa da sihirli bir değnek değildir. Onları etkili bir şekilde kullanmak için dikkat etmeniz gereken belirli hususlar vardır.
DOM Erişiminden Kaçının
Web Workers'a DOM erişimi yoktur. Bir işçi içinden document veya window nesnelerini manipüle edemezsiniz. Bu, yarış durumlarını önlemek için tasarlanmıştır. Sonuca göre kullanıcı arayüzünü güncellemeniz gerekiyorsa, veriyi ana iş parçacığına geri gönderin ve DOM güncellemesini ana iş parçacığına bırakın.
Veri Aktarım Yükünü Minimize Edin
İş parçacıkları arasındaki iletişim, verilerin serileştirilmesini ve serileştirmesini içerir. Büyük miktarda veriyi gidip gelmek gecikmeye yol açabilir. Bunu azaltmak için mümkün olduğunda Transfer Edilebilir Nesneler kullanın. Örneğin, bir ArrayBuffer gönderirken, pahalı kopyalama işlemlerinden kaçınmak için arabelleğin sahipliğini işçiye aktarabilirsiniz.
// Büyük verinin verimli aktarımı
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage(buffer, [buffer]);Web Workers'ı CPU Yoğun, G/Ç Yoğun Olmayan Görevler İçin Kullanın
Web Workers; görüntü işleme, veri analizi ve kriptografi gibi CPU yoğun görevlerde mükemmel çalışır. Ancak ağ istekleri gibi G/Ç yoğun görevler için ana iş parçacığı zaten asenkron istekleri verimli bir şekilde yönetiyor olabilir. İşçileri render döngüsünü gerçekten engelleyen işlemler için saklayın.
Sonuç
Web Workers uygulamak, yüksek performanslı web uygulamaları oluşturmaya yönelik ara ve ileri düzey frontend geliştiricileri için kritik bir beceridir. Ağır JavaScript işlemlerini arka plan iş parçacıklarına yükleyerek, uygulamanızın yanıt veren kalmasını ve sorunsuz bir kullanıcı deneyimi sunmasını sağlarsınız. İşçi ortamının sınırlarına saygı duyduğunuzu, veri aktarımını optimize ettiğinizi ve CPU yoğun görevler için işçileri stratejik olarak kullandığınızı unutmayın. Bu uygulamalarla uygulamanızın performans potansiyelini tam olarak ortaya çıkarabilirsiniz.