WEB API
Web Workers API
Sıkça duyduğumuz Tarayıcıda UI Single Thread olarak çalışmakta bu durumu bazı zamanlar Worker yardımı ile multi-thread hale getirebiliriz. Worker API ve bunun özelleşmiş türevleri Service Workers, Worklets API’leri bu işlevi yerine getirebilmek için tasarlanmış API’ler.
Bu yazı daha önceden başlamış olduğum Web API yazı serisinin devamı niteliğindedir. JS kodları ile işletim sistemi veya tarayıcının native kısımlarına erişmek için sağlanan API’ler olduğundan bahsetmiştim.
JS tarayıcı ortamında Single Thread ile çalışıyor. Ana çalışma mantığı I/O işlemleri yaparken async olarak çalışması bu sayede siz UI thread içerisinde birçok işlemi aynı anda yapabiliyorsunuz. Fakat bu UI işlemleri sırasında aynı zamanda CPU uzun ve yoğun bir şekilde kullanmanız gereken Görüntü İşleme ve Hesaplama gibi durumlar olduğunda Web Workers gibi ek thread ihtiyaç duyarsınız.
Not: Process, Thread kavramını bilmiyorsanız Non I/O blocking yazımı okumanızı öneririm. Tarayıcıların nasıl Single Loop’ta çalıştığını bilmiyorsanız Event Loop yazımı okumanızı öneririm.
Peki bu <script> içerisindeki kodları yan thread içerisinde nasıl çalıştıracağız.
Web Worker
Web Worker sizin main thread dışında başka bir thread içerisinde worker scripti çalıştırmanızı sağlar.
Aşağıda bunun ile ilgili bir örnek geliştirdim. Senaryo kısaca şöyle index.html içerisinde 2 tane düğme var. Bu düğmelerden bir tanesi 10000000000 döngüyü ana thread dönerken diğeride worker thread içerisinde dönüyor olacak.
- İlk testimizde Normal Hesaplama düğmesine basın ve arkaplanda main thread loop çalışırken Hello düğmesine basın. Ekrana Hello counter artmadığını sum hesaplama işlemi bittikten sonra Hello:counter gerçek değeri yansıtılır.
- 2nci testimizde bu işlemi Worker Hesapla düğmesi ile yapın. Worker çalışan sum işlemi main thread çalışmasını bloklamadığını görebilirsiniz.
Bunun için 3 tane dosya hazırladım. index.html, main.js, worker.js
Main.js incelediğimizde yeni bir worker oluşturmak için aşağıdaki kodu kullanarak diğer js dosyaları yüklenebilir.
const myWorker = new Worker('worker.js');MainThread diğer worker erişmek ve iletişim kurmak için postMessage metodunu kullanır. Worker gelecek bir message dinlemek için onmessage fonksiyonuna listener eklenerek gerçekleştirilir.
Worker.js kodunun içine baktığımızda self.onmessage MainThread gelen mesajları dinleyerek workerda bunun içerisinde işlemler gerçekleştirebilir ve self.postMessage işlemin bittiği veya ara durumu ile ilgili mesajlar bilgilendirmeler yapabilirsiniz.
Teknik Kısmı
Web worker oluşturduğunuzda mevcut window context dışında global bir context içerisinde çalıştırılır. Worker DOM API’sine erişemez. Zaten UI single thread olması, tek bir event loop handle edilip yönetilmesini bozacak bir yapıda olması gerekir. Oluşturulan bu worker DedicatedWorkerGlobalScope veya SharedWorkerGlobalScope contextinde çalıştırılır. DOM objesi dışında window yer alan birçok WebSocket, Storage vb.. workerlar erişip kullanabilirler . Bunların listesi bu linkten erişebilirsiniz
Diğer Özelleşmiş Worker Türleri
Bu worker’ların farklı işler için özelleşmiş versiyonları bulunur. Bu farkları ilerleyen konularda daha detaylı anlatacağım ama burada kısaca bahsetmek gerekirse
- Shared Workers: Birden fazla iframe ve window tarafından ortak bir şekilde kullanılabilen scriptlerdir. new SharedWorker() oluşturulur ve dipek worker üzerinden değil onun üzerindeki bir port üzerinden iletişim kurulur
- Service Workers: Web Uygulaması, Tarayıcı ve Network arasında proxy görevi gören workerlardır. Arka planda web uygulamalarının bir takım network problemlerinden etkilenmeden çalışmasına devam etmesini sağlar.
ServiceWorker nerelerde kullanıldığını daha önceden yazmış olduğum Nasıl Frontend Uzmanı Olabilirim yazısından bir alıntıyla daha iyi anlatabileceğimi düşünüyorum.
PWA: Progressive Web App kavramı Google tarafından ortaya atılmış, Standart Web Sayfaları ve Native Mobil Uygulamalar arasında hibrid bir uygulama modeli çıkaralım bu model Web sayfası gibi çalışsada İnternet Olmadığı zamanlarda da ServiceWorker, LocalStorage ve diğer WebAPI sayesinde Native uygulama özelliklerinide gösterse. Bu şu anda çok da yaygın olarak kullanılmamaktadır. (Bir standart/defacto olmadığını düşünüyorum)
- Worklets: Rendering pipeline’da bazı kısımlarda yüksek performans ihtiyaçlarını bu low-level script kodları sağlar. (
PaintWorklet, AudioWorklet, AnimationWorklet, LayoutWorklet)kullanabilirsiniz.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
