Web Çalışanlarına Giriş JavaScript API

Web İşçileri size izin veren bir JavaScript API'sidir. komut dosyalarını ana diziden ayrı bir dizide çalıştır. Arka plandaki komut dosyalarından dolayı, ana komut dosyalarının yürütülmesinde herhangi bir engel istemiyorsanız kullanışlı olabilir..

Web İşçileri API’si hemen hemen tüm tarayıcılarda desteklenir, daha ayrıntılı bilgi için CanIUse belgelerine bakın. Koda girmeden önce, bu API'yi kullanmak isteyebileceğiniz birkaç senaryo görelim, böylece neyi kastettiğim hakkında bir fikir edinebilirsiniz. arka plan esk dizesi.

Davaları kullanın

Diyelim ki bir senaryo var. bir dosyayı alır ve işler. Eğer bir dosya ise önemli ölçüde büyük işlenmesi için uzun zaman alacak! Bu, daha sonra çalıştırılan diğer komut dosyalarını durdurabilir.

Ancak, eğer dosya işleme bir arka plan iş parçacığına taşındı, olarak bilinir işçi ipliği, birincisi sona erene kadar diğer etkinlikler engellenmeyecek.

Senaryo arka plan çalışan iş parçacığında yürütülen olarak bilinir çalışan komut dosyası ya da sadece işçi.

Başka bir örnek için, orada bir hayal sekmeler halinde düzenlenmiş büyük biçim. Kontrolleri tek bir sekmede güncelleyecek şekilde yazılmıştır Diğer bazı kontrolleri etkiler.

Diğer sekmelerin güncellenmesi biraz zaman alırsa kullanıcı geçerli sekmeyi sürekli kullanamıyor olayları bekletilmeden. Bu, kullanıcı arayüzünü donabilir, kullanıcının dehşetine düşebilir.

Bir kullanıcı mevcut bir sekmeyi doldururken diğer sekmeleri görmeyeceğinden, arka plan iş parçacığındaki diğer sekmelerin denetimlerini güncelle. Bu şekilde kullanıcı, doldurduğu mevcut sekmeyi, diğer sekmelerdeki kontrollerin güncelleme işlemi tarafından komut dosyalarının herhangi biri engellenmeden kullanmaya devam edebilir..

Aynı şekilde, bir komut dosyasının bulunduğu bir senaryo bulursanız kullanıcının kullanıcı arayüzünü kullanmasını engelleyebilir yürütme işlemi tamamlanıncaya kadar, arka planda çalıştırılabilmesi için onu bir çalışan iş parçacığına taşımayı düşünebilirsiniz.

İşçilerin kapsamları ve türleri

Web İşçileri API’sı, muhtemelen çalışılması en basit API’lerden biridir. Oldukça basit yöntemleri var alt iş parçacığı oluştur ve ana senaryodan onlarla iletişim kurmak.

Bir çalışan iş parçacığının global kapsamı ana iş parçacığından farklı bir bağlamdadır. Sen yöntemlerine ve özelliklerine erişemiyorum pencere nesne gibi Alarm() Bir işçi iş parçacığı içinde. Ayrıca DOM’i doğrudan değiştiremiyorum işçi ipliğinden.

Sen yine de kutu altında olan birçok API'yi kullanın pencere, Örneğin Söz vermek ve getirmek, işçi dizinizde (tam listeye bakın).

Ayrıca olabilir iç içe işçi iş parçacıkları: başka bir çalışan iş parçacığından yaratılan çalışan iş parçacıkları. Başka biri tarafından oluşturulan işçi subworker.

Ayrıca orada çok türleri işçilerin. İki ana özel ve ortak çalışanlar.

Özel işçiler aynı tarama içeriğine ait ana ipliklerinin ait olduğu. Ancak, paylaşılan işçiler farklı bir tarama bağlamında mevcut (örneğin, iframe'de) ana komut dosyasından. Her iki durumda da, ana senaryo ve işçiler aynı etki alanında olmak zorunda.

Bu eğitimdeki örnek özel işçi hakkında, en yaygın olan hangisi.

API yöntemleri

İçin aşağıdaki şemaya bakın. tüm ana yöntemlere hızlı bir bakış Web İşçileri API’sını oluşturan.

İşçi() inşaatçı özel bir iş parçacığı oluşturur ve referans nesnesini döndürür. Sonra, bu nesneyi o işçi ile iletişim kurmak için kullanıyoruz..

postMessage () yöntem hem ana hem de çalışan komut dosyalarında kullanılır. birbirlerine veri göndermek. Gönderilen veriler daha sonra diğer taraf tarafından onMessage olay işleyicisi.

() Sona yöntem İşçi iş parçacığını ana komut dosyasından sonlandırır.. Bu sonlandırma acil: Geçerli komut dosyası yürütme ve bekleyen komut dosyaları iptal edilir. kapat() yöntem aynı şeyi yapar, ancak kendisini kapatarak çalışan iş parçacığı tarafından çağrılır.

Örnek kod

Şimdi bazı örnek kodları görelim. index.html sayfa tutar ana senaryo içinde

İle başlıyoruz ana betiğin işçi iş parçacığının oluşturulması.

  w = yeni İşçi ('worker.js'); 
  İşçi() inşaatçı işçi dosyasının URL'sini argümanı olarak alır.
 Sonra, bunun için bir olay işleyicisi ekleriz onMessage yeni oluşturulan işçi örneğinin olayı ondan veri almak.  veri mülkiyeti e olay alınan verileri tutacak.
  w = yeni İşçi ('worker.js'); w.onmessage = (e) => console.log ('İşçiden alındı: $ e.data');  
 Şimdi kullanıyoruz postMessage () için alt iş parçacığına bazı veriler gönder bir düğmeye tıklayarak. postMessage () yöntem iki argüman alabilir. İlki herhangi bir türde olabilir (string, array…). Veri işçi ipliğine gönderilmek üzere (veya çalışan iş parçacığında yöntem olduğunda ana komut dosyasına).
 İkinci, isteğe bağlı parametre, bir nesne dizisidir. işçi dişliler tarafından kullanılabilir (fakat ana senaryo tarafından değil veya tersi). Bu tür nesnelere denir transfer edilebilir nesneleri.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Sadece işçi iş parçacığına bir dize değeri gönderiyorum.
 İşçi iş parçacığında bir onMessage olay işleyicisi bu verileri alacak düğmesine tıklayın ana komut dosyası tarafından gönderilen. İşleyicinin içinde, biz alınan dizgiyi bir başkasıyla birleştirmek ve sonucu tekrar ana komut dosyasına gönderin..
  console.info ('işçi oluşturuldu'); onmessage = (e) => postMessage ('Merhaba $ e.data');  
 Kullanmak zorunda olduğumuz ana senaryodan farklı olarak w başvuru nesnesi belirli iş parçacığına bakın betiğin kullandığı onMessage ve postMessage yöntemleri var işçi iş parçasında bir referans nesnesine gerek yok ana konuya işaret etmek.
 Kod aşağıdaki gibi çalışır. Tarayıcı yüklendiğinde index.html, konsol gösterecek "işçi oluşturuldu" mesajı en kısa sürede işçi() Yapıcı ana iş parçacığında yürütülür, yeni bir işçi yaratmak.
 Sayfadaki düğmeye tıkladığınızda, "İşçiden Alındı: Merhaba john" dize olan konsoldaki işçi iş parçacığında birleştirildi ona gönderilen verilerle ana komut dosyasına geri gönderildi.