Hiç tarayıcıda kod çalıştırmanız gerekip de uygulamanız bir süreliğine yanıt vermemeye başladı mı? HTML5 web çalışanları ile bunu bir daha asla deneyimlemeniz gerekmez.

Web çalışanları, uzun süre çalışan kodu ayırmanıza ve sayfada çalışan diğer kodlardan bağımsız olarak çalıştırmanıza olanak tanır. Bu, karmaşık işlemler sırasında bile kullanıcı arabiriminizin yanıt vermesini sağlar.

Web Çalışanları Nedir?

Geleneksel olarak, JavaScript tek iş parçacıklı bir dildir. Bu, tek bir kod parçası çalışırken başka hiçbir şeyin çalışamayacağı anlamına gelir. Örneğin, bir DOM öğesini canlandırmaya çalışan kodunuz varsa, bir değişkeni değiştirmeye çalışan kodun çalışabilmesi için animasyonun bitmesini beklemesi gerekir.

Web çalışanları, DOM’a doğrudan erişimi olmayan ayrı bir iş parçacığında yürütülen JavaScript dosyalarıdır.

Web çalışanlarını düşünmenin bir yolu, çalıştırılmaları çok zaman alan kod parçaları olduklarıdır, bu nedenle onları arka planda çalıştırmaları için tarayıcıya verirsiniz. Bu kod artık arka planda çalıştığı için web sayfanızdan sorumlu JavaScript’i etkilemez.

Bir yan etki olarak, artık kodunuzun geri kalanıyla doğrudan etkileşime giremez, bu nedenle web çalışanlarının DOM’a erişimi yoktur. Ancak, WebSocket ve Fetch API’leri dahil olmak üzere diğer birçok tarayıcı API’si hala mevcuttur.

Yine de, web çalışanları ana iş parçacığından tamamen izole değiller. Bir çalışanın ana iş parçacığı ile iletişim kurması gerektiğinde, bir mesaj gönderebilir ve ana iş parçacığı yanıt olarak kendi mesajını gönderebilir.

Neden Web Çalışanları?

Web çalışanlarından önce, tarayıcıda çok fazla zaman gerektiren JavaScript’i çalıştırmanın tek yolu şunlardan biriydi:

Sayfanın bir süre yanıt vermeyeceğini kabul edin.

Bu kodu eşzamansız parçalara ayırın .

Yanıt vermeyen bir sayfa genellikle kötü bir kullanıcı deneyimi oluşturduğundan, eşzamansız seçeneğini tercih edebilirsiniz. Bu şekilde kod yazmak, tarayıcının kullanıcı arayüzünü işlemediği sırada çalıştırabileceği daha küçük parçalara bölmek anlamına gelir. Parçaların, kullanıcı arayüzünün güncellenmesi gerekiyorsa tarayıcının geçerli parçayı yürütmeyi bitirip kullanıcı arayüzüne katılabilmesi için yeterince küçük olması gerekir.

Bu soruna daha iyi bir çözüm sunmak için HTML5’e web çalışanları eklendi. Eşzamansız kodla sizi yaratıcı olmaya zorlamak yerine, bir işlevi temiz bir şekilde kendi yalıtılmış iş parçacığında çalışacak şekilde ayırmanıza izin verirler.

Bu, geliştiricilerin bu tür kodlar yazmasını kolaylaştırdı ve kullanıcı deneyimini de geliştirdi.

Web Çalışanları İçin Kullanım Örnekleri

İstemci tarafında çok fazla hesaplama gerektiren herhangi bir uygulama, web çalışanlarından yararlanabilir.

Örneğin, uygulamanızın bir kullanım raporu oluşturmak istediğini ve gizlilik endişeleri nedeniyle istemcideki tüm verileri depoladığını varsayalım.

Bu raporu oluşturmak için web uygulamanızın verileri alması, bunlar üzerinde hesaplamalar yapması, sonuçları düzenlemesi ve bunları kullanıcıya sunması gerekir.

Bunu ana iş parçacığında yapmaya çalışırsanız, uygulama verileri işlerken kullanıcı uygulamayı tamamen kullanamaz. Bunun yerine, bu kodun bir kısmını veya tamamını bir web çalışanına taşıyabilirsiniz. Bu, kullanıcının hesaplamalar yapılırken uygulamayı kullanmaya devam etmesini sağlar.

JavaScript’te Web Çalışanları Nasıl Kullanılır?

Web Worker API , web çalışanlarının nasıl kullanılacağını tanımlar. Bu API’yi kullanmak, Worker yapıcısıyla aşağıdaki gibi bir Worker nesnesi oluşturmayı içerir:

let newWorker = Worker(‘worker.js’);

Worker yapıcısı , bir JavaScript dosyasının adını parametresi olarak kabul eder ve dosyayı yeni bir iş parçacığında çalıştırır. Ana iş parçacığının çalışan iş parçacığı ile etkileşime girmesine izin vermek için bir Çalışan nesnesi döndürür.

Çalışanlar, ileri geri mesajlar göndererek ana iş parçacığıyla etkileşime girer. Çalışan ve ana iş parçacığı arasında olayları göndermek için postMessage işlevini kullanırsınız. Karşı taraftan gelen mesajları dinlemek için onmessage olay dinleyicisini kullanın .

İşte bir kod örneği. İlk olarak, bir ana iş parçacığı şöyle görünebilir:

let worker = new Worker(‘worker.js’)

worker.postMessage(‘Hey!’)

worker.onmessage = function(e) {

console.log(‘Worker thread says’, e.data)

}

Bu ana iş parçacığı, worker.js’den bir çalışan nesnesi oluşturur ve ardından bu nesneye işçi.postMessage ile bir mesaj gönderir . Ardından, konsept olarak bir DOM olay dinleyicisine benzer bir olay dinleyicisi tanımlar . Çalışan ana iş parçacığına her mesaj gönderdiğinde ve işleyici, çalışanın mesajını konsola kaydettiğinde bir olay tetiklenir.

Worker (worker.js) içindeki kodun bir görevi vardır:

onmessage = function(e) {

let message = e.data;

console.log(‘Main thread said’, message);

postMessage(‘Hi!’)

}

Ana ileti dizisinden gönderilen tüm mesajları dinler, iletiyi konsola kaydeder ve ana diziye geri dönüş iletisi gönderir.

Bu örnekteki mesajların tümü dizgidir, ancak bu bir gereklilik değildir: mesaj olarak hemen hemen her türlü veriyi gönderebilirsiniz.

Şimdiye kadar gördüğünüz türden çalışanlara adanmış çalışanlar denir. Onlara yalnızca onları oluşturduğunuz dosyadan erişebilirsiniz (bunlar ona adanmıştır). Paylaşılan çalışanlar bunun tam tersidir: Birden fazla dosyadan mesaj alabilir ve bu dosyalara mesaj gönderebilirler. Paylaşılan çalışanlar, kavramsal olarak adanmış çalışanlarla aynıdır, ancak bunları biraz farklı şekilde kullanmalısınız.

Bir örneğe bakalım. Worker yapıcısını kullanmak yerine, paylaşılan bir çalışan kullanmak isteyen her dosyanın SharedWorker() kullanarak bir çalışan nesnesi oluşturması gerekir :

let sharedWorker = new SharedWorker(‘worker.js’)

Ancak farklılıklar burada bitmiyor. Bir dosyanın paylaşılan bir çalışandan mesaj göndermesi veya alması için bunu doğrudan yapmak yerine bir bağlantı noktası nesnesine erişerek yapması gerekir. İşte böyle görünüyor:

sharedWorker.port.postMessage(‘Hi there!’)

sharedWorker.port.onMessage = function(e) {

console.log(‘The shared worker sent’, e.data);

}

Çalışan içindeki port nesnesini de kullanmalısınız:

onconnect = function(e) {

const port = e.ports[0];

port.onmessage = function(e) {

console.log(‘Message recieved’, e.data)

port.postMessage(‘Hello!’);

}

}

onconnect dinleyicisi , bir bağlantı noktasına her bağlantı gerçekleştiğinde tetiklenir (ana iş parçacığında bir onmessage olay dinleyicisi ayarlandığında).

Bu olduğunda, kod, connect olayından yeni bağlanan bağlantı noktasını alır ve onu bir değişkende saklar. Ardından kod, mesaj dinleyicisini bağlantı noktası nesnesine kaydeder. Kod daha sonra mesajı konsola kaydeder ve ana iş parçacığına bir mesaj göndermek için bağlantı noktasını kullanır.

Web Çalışanları Kullanıcı Deneyimini İyileştiriyor

Web çalışanları, arka planda karmaşık ve uzun süre çalışan kod parçalarını çalıştırmanıza izin veren JavaScript dizileridir. Bu kod daha sonra kullanıcı arayüzünün bloke edilmesini önleyecektir. Web çalışanlarını kullanmak, bu tür kodların yazılmasını çok daha kolaylaştırır ve uygulama kullanıcısı için deneyimi geliştirir. Web çalışanı API’sini kullanarak web çalışanları oluşturabilir ve onlarla etkileşim kurabilirsiniz.