Uygulamanızı çalıştırmak için çok uzun süren tarayıcıda kod çalıştırmanız bir süreliğine yanıt vermemeye başladı mı? HTML5 web çalışanları ile bunu bir daha asla deneyimlemenize gerek yok.

Web çalışanları, uzun süredir ç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ı arayüzünüzü duyarlı tutar.

Web Çalışanları Nelerdir?

Geleneksel olarak, JavaScript tek iş parçacıklı bir dildir. Bu, 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ılması çok zaman alan kod parçaları olmalarıdır, bu nedenle onları arka planda yürütmeleri için tarayıcıya verirsiniz. Bu kod artık arka planda çalıştığından, 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 olmaz. Ancak, WebSocket ve Fetch API'leri de 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ğildir. Bir işçinin 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 zaman gerektiren JavaScript'i çalıştırmanın tek yolu şuydu:

  • Sayfanın bir süre yanıt vermeyeceğini kabul edin.
  • Bu kodu içine kır asenkron parçalar.

Yanıt vermeyen bir sayfa genellikle kötü bir kullanıcı deneyimi olduğundan, eşzamansız seçeneği tercih edebilirsiniz. Kodu bu şekilde yazmak, onu, kullanıcı arayüzünü işlemezken tarayıcının çalıştırabileceği daha küçük parçalara bölmek anlamına gelir. Parçaların yeterince küçük olması gerekir ki, kullanıcı arayüzünün güncellenmesi gerekiyorsa, tarayıcı mevcut parçayı yürütmeyi bitirebilir ve kullanıcı arayüzüne katılabilir.

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

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

Web Çalışanları iç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 istemcideki tüm verileri gizlilik endişeleri dışında depoladığını varsayalım.

Bu raporu oluşturmak için web uygulamanızın verileri alması, ü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

bu Web Çalışanı API'si 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 = Çalışan('işçi.js');

bu Çalışan yapıcı, parametresi olarak bir JavaScript dosyasının adını 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ığıyla etkileşime girmesine izin vermek için bir Worker nesnesi döndürür.

İşçiler, ileri geri mesajlar göndererek ana iş parçacığı ile etkileşime girer. sen kullan mesaj mesajı işçi ve ana iş parçacığı arasında olay gönderme işlevi. Kullan mesaj karşı taraftan gelen mesajları dinlemek için olay dinleyicisi.

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

İzin Vermek işçi = yeni Çalışan('worker.js')
işçi.postMesaj('Hey!')
işçi.onmessage = işlev(e) {
 konsol.log('Çalışan iş parçacığı diyor', e.veri)
}

Bu ana iş parçacığı, work.js'den bir işçi nesnesi oluşturur, ardından ona bir mesaj gönderir. işçi.postMesaj. Daha sonra, konsept olarak bir olay dinleyicisine benzer bir olay dinleyicisi tanımlar. DOM olay dinleyicisi. Çalışan ana iş parçacığına her mesaj gönderdiğinde bir olay tetiklenir ve işleyici çalışanın mesajını konsola kaydeder.

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

mesaj = işlev(e) {
İzin Vermek mesaj = e.veri;
 konsol.log('Ana konu dedi', İleti);
 mesaj mesajı('Merhaba!')
}

Ana iş parçacığından gönderilen mesajları dinler, mesajı konsola kaydeder ve ana iş parçacığına geri dönüş mesajı gönderir.

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

Şimdiye kadar gördüğünüz türdeki çalışanlara adanmış çalışanlar denir. Onlara yalnızca içinde oluşturduğunuz dosyadan erişebilirsiniz (ona adanmışlardır). Paylaşılan çalışanlar bunun tam tersidir: birden çok dosyadan mesaj alabilir ve birden fazla dosyaya mesaj gönderebilirler. Paylaşılan çalışanlar kavramsal olarak adanmış çalışanlarla aynıdır, ancak bunları biraz farklı kullanmanız gerekir.

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

İzin Vermek paylaşılanİşçi = yeni SharedWorker('worker.js')

Ancak farklılıklar burada bitmiyor. Bir dosyanın paylaşılan bir çalışandan mesaj göndermesi veya alması için, bir dosyaya erişerek bunu yapması gerekir. Liman doğrudan yapmak yerine nesne. İşte neye benzediği:

paylaşılanWorker.port.postMessage('Merhaba!')
paylaşılanWorker.port.onMessage = işlev(e) {
 konsol.log('Paylaşılan işçi gönderildi', e.veri);
}

Çalışanın içindeki port nesnesini de kullanmanız gerekir:

onconnect = işlev(e) {
const bağlantı noktası = e.portlar[0];
port.onmessage = işlev(e) {
 konsol.log('mesaj alındı', e.veri)
 port.postMesaj('Merhaba!');
 }
}

bu onconnect dinleyici, bir bağlantı noktasına her bağlantı kurulduğunda tetiklenir (bir mesaj olay dinleyicisi ana iş parçacığında kurulur).

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 şunları kaydeder: mesaj port nesnesindeki dinleyici. 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ştirir

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ü engellemekten kaçınacaktır. Web çalışanlarının kullanılması, bu tür kodların yazılmasını çok daha kolay hale getirir ve uygulama kullanıcısının deneyimini geliştirir. Web çalışanı API'sini kullanarak web çalışanları oluşturabilir ve onlarla etkileşim kurabilirsiniz.