JavaScript'te sitenin genel kullanıcı arayüzünü geliştirmek için birden fazla yaklaşım vardır. “Web Çalışanı” ana iş parçacığının engellenmeden çalışmaya devam etmesini sağlayan yaklaşımlardan biridir. Ayrı bir JavaScript motoru örneğini içerir ve bu nedenle ana iş parçacığının işlevlerini çağıramaz.
Bu makale nasıl kullanılacağını tartışacak “Web Çalışanı” JavaScript'te çoklu iş parçacığı için.
Web Çalışanları nedir?
“Web çalışanları” JavaScript'in görevleri paralel/aynı anda ayrı/özel bir iş parçacığında çalıştırmasını sağlayan bir tarayıcı API'sine karşılık gelir.
Web Çalışanlarına İhtiyaç Nedir?
JavaScript tek iş parçacıklı olduğundan, karmaşık JavaScript kodları UI iş parçacığını engeller; yani, yenileme, kullanıcı giriş olaylarını uygulama vb. için tüm görevleri yerine getiren ana pencereyi durdurur. Böyle bir senaryoda, kullanıcı deneyimi etkilenir . Bu sorunla başa çıkabilmek için “Web Çalışanı” yürürlüğe girer ve UI iş parçacığının engellenmesini çözer.
JavaScript ile Çoklu İş Parçacığı için Web Çalışanları Nasıl Kullanılır?
Yapmak “Web Çalışanı” , Worker yapıcısını kullanın. Argüman olarak, istenen işlevselliği uygulayan çalışan komut dosyasının yoluna karşılık gelen bir URL'yi alacak şekildedir. Ancak çalışan kodunu bir HTML dosyasına dahil etmek için bir “damla” işçi kodu yazmak için.
Sözdizimi (Web Çalışanı Oluşturma)
yapı X = yeni Çalışan ( 'işçi.js' ) ;Sözdizimi(İşçiye Mesaj Gönderme)
yapı X = yeni Çalışan ( 'işçi.js' ) ;
Sözdizimi(İşçiden Mesaj Alma)
X. mesajda = işlev ( etkinlik ) {konsol. kayıt ( etkinlik. veri ) ;
} ;
Örnek: JavaScript'te Bir Sayının Faktöriyelini Hesaplamak için “Web Worker” Kullanımı
Aşağıdaki örnek şunu kullanır: 'Çalışan()' Bir web çalışanı oluşturmak ve bir sayının faktöriyelini hesaplamak için yapıcı:
< HTML >
< KAFA >
< h2 tarzı = 'metin hizalama: ortala;' > Web Çalışanları Örneği h2 >
KAFA >
< vücut >
< senaryo >
yapı X = yeni Çalışan ( URL'si. CreateObjectURL ( yeni Damla ( [
'
// Çalışan betiği
yapı hakikat = ( N ) => {
eğer ( N == 0 || N == 1 ) {
geri dönmek 1n ;
}
başka {
geri dönmek BigInt ( N ) * hakikat ( BigInt ( N ) - 1n ) ;
}
} ;
öz. mesajda = ( etkinlik ) => {
yapı İle = hakikat ( etkinlik. veri ) ;
öz. mesaj gönder ( İle. toString ( ) ) ;
} ; '
] , { tip : 'metin/javascript' } ) ) ) ;
X. mesaj gönder ( 15 saat ) ;
X. mesajda = ( etkinlik ) => {
yapı dışarı = etkinlik. veri ;
konsol. kayıt ( 'Bir Web Çalışanı Aracılığıyla 15'in Faktoriyeli-> ' , dışarı ) ;
} ;
vücut >
HTML >
Bu kodda aşağıdaki adımları uygulayın:
- Öncelikle belirtilen başlığı belirtin.
- Bundan sonra bir oluşturun “Web Çalışanı” Çalışanın kodunu içeren Blob nesnesinin URL'sine sahip nesne.
- Çalışana özel kod, yinelemeli bir işlev yoluyla sayının faktöriyelini hesaplayan anonim bir işleve dahil edilir.
- Ayrıca, çalışan ana iş parçacığı aracılığıyla gönderilen mesajları dinler. “self.onmessage” olay, geçirilen sayının faktöriyelini alır ve sonucu ana iş parçacığına iletir. “mesaj sonrası()” yöntem.
- Ana ileti dizisinde bir çalışan örneği oluşturun ve ona şu numarayı içeren bir mesaj gönderin: ' 15 saat ”. Burada, ' N ”, “BigInt” değerini ifade eder.
- Çalışan faktöriyelin hesaplanmasını tamamladıktan sonra sonucu/sonucunu kullanarak ana iş parçacığına geri gönderir. “mesaj sonrası()” yöntem.
- Son olarak, ana iş parçacığı sonucu getirir/alır. “mesajda” olayı ve konsoldaki sayının karşılık gelen faktöriyelini döndürür.
Çıktı
Web Çalışanlarının Avantajları
Paralel İşleme : Aynı kodun paralel çalıştırılması durumunda.
Kodun Yürütülmesinde Kesinti Yok: Kodun yürütülmesi, geçerli sayfadaki yenilemelerden vb. bağımsız olarak yapılır.
Hareket Takibi: Tüm hareket algılama arka plan çalışanında gerçekleşir.
Çoklu İş Parçacığı Etkinleştirildi: Bunlar JavaScript'te çoklu iş parçacığını etkinleştirir.
Arttırılmış performans: Yoğun/zorlayıcı görevleri ayrı iş parçacıklarında gerçekleştirerek performansı optimize edin.
Etkili Kullanıcı Deneyimi: Bunlar, ana iş parçacığının engellenmesini önleyerek duyarlı bir kullanıcı deneyimi sağlar.
Web Çalışanlarının Sınırlamaları
Ancak web çalışanlarının da bazı sınırlamaları vardır. Bunlar şu şekilde ifade edilmektedir:
- Belleğin daha fazla kullanılması.
- Bir çalışan iş parçacığında DOM güncellenemiyor veya pencere nesnesi çağrılamıyor.
Çözüm
“Web Çalışanları” JavaScript'in görevleri aynı anda ayrı/özel bir iş parçacığında çalıştırmasını sağlayan bir tarayıcı API'sine karşılık gelir. Bunlar, çalışan komut dosyası dosyasının yoluna karşılık gelen bir URL'yi bağımsız değişken olarak alarak kullanılabilir. Bu blogda JavaScript'te çoklu iş parçacığı için 'Web Çalışanları'nın kullanımı tartışıldı.