Web worker'lar kullanarak arka plan işleme

Web worker'lar, CPU yoğun hesaplamaları bir arka plan iş parçacığında çalıştırmanıza olanak tanıyarak ana iş parçacığını kullanıcı arayüzünü güncellemek için serbest bırakır. Bilgisayar Destekli Tasarım (CAD) çizimleri oluşturma veya ağır geometrik hesaplamalar yapma gibi çok sayıda hesaplama gerçekleştiren uygulamalar, performansı artırmak için web worker'ları kullanabilir.

Web worker ekleme

Mevcut bir projeye web worker eklemek için Angular CLI ng generate komutunu kullanın.

ng generate web-worker <location>

Uygulamanızın herhangi bir yerine web worker ekleyebilirsiniz. Örneğin, kök bileşen olan src/app/app.component.ts dosyasına bir web worker eklemek için aşağıdaki komutu çalıştırın.

ng generate web-worker app

Komut aşağıdaki işlemleri gerçekleştirir.

1. Projenizi web worker'ları kullanacak şekilde yapılandırır (henüz yapılandırılmadıysa).

2. Mesajları almak için src/app/app.worker.ts dosyasına aşağıdaki iskelet kodunu ekler.

   src/app/app.worker.ts

   addEventListener('message', ({data}) => {
     const response = `worker response to ${data}`;
     postMessage(response);
   });

3. Worker'ı kullanmak için src/app/app.component.ts dosyasına aşağıdaki iskelet kodunu ekler.

   src/app/app.component.ts

   if (typeof Worker !== 'undefined') {
     // Yeni bir worker oluştur
     const worker = new Worker(new URL('./app.worker', import.meta.url));
     worker.onmessage = ({data}) => {
       console.log(`page got message: ${data}`);
     };
     worker.postMessage('hello');
   } else {
     // Bu ortamda web worker'lar desteklenmiyor.
     // Programınızın yine de doğru çalışması için bir yedek mekanizma eklemelisiniz.
   }

Bu başlangıç iskeleti oluşturduktan sonra, worker'a mesaj göndererek ve worker'dan mesaj alarak web worker'ı kullanmak üzere kodunuzu yeniden düzenlemelisiniz.

Uygulamanızın bu ortamlarda çalışmasını sağlamak için, worker'ın normalde gerçekleştireceği hesaplamaları yapmak üzere bir yedek mekanizma sağlamalısınız.