Web çalışanlarına genel bakış

Bu kurstaki içeriğin şu ana kadarki kısmı, genel HTML performansıyla ilgili hususlar, kaynak ipuçları, ilk sayfa yükleme süresini ve kullanıcı girişine duyarlılığı iyileştirmek için çeşitli kaynak türlerinin optimizasyonu ve belirli kaynakların geç yüklenmesi gibi kavramlara odaklanmıştır.

Ancak, JavaScript ile ilgili performansın bu kursta henüz ele alınmamış bir yönü vardır. Bu ve bir sonraki modülde, giriş duyarlılığını iyileştirme konusunda web çalışanlarının rolü budur.

JavaScript çoğu zaman tek iş parçacıklı bir dil olarak tanımlanır. Pratikte bu, tarayıcının tarayıcıda gördüğünüz işlerin çoğunu yaptığı tek iş parçacığı olan ana iş parçacığı anlamına gelir. Bu çalışmalar arasında komut dosyası yazma, bazı oluşturma işi türleri, HTML ve CSS ayrıştırma ve kullanıcı deneyimini iyileştiren diğer kullanıcı odaklı çalışmalar yer alır. Aslında tarayıcılar, geliştirici olarak normalde doğrudan erişiminizin olmadığı işleri yapmak için GPU iş parçacıkları gibi başka iş parçacıklarını kullanır.

JavaScript söz konusu olduğunda, varsayılan olarak yalnızca ana iş parçacığında çalışmakla genellikle sınırlı olursunuz. JavaScript'te ek iş parçacıkları kaydetmek ve kullanmak mümkündür. JavaScript'te çoklu iş parçacığına olanak tanıyan özellik, Web Workers API olarak bilinir.

Web çalışanları, sayfanın yanıt vermemesine neden olan uzun görevlere neden olmadan ana iş parçacığında çalıştırılamayan hesaplama açısından pahalı işleriniz olduğunda kullanışlıdır. Bu tür görevler, web sitenizin Sonraki Boyamayla Etkileşimi (INP) kesinlikle etkileyebilir. Bu nedenle, ne zaman ana iş parçacığının tamamen dışında bırakılabilecek bir işiniz olduğunu bilmek faydalı olabilir. Bu, ana iş parçacığındaki diğer görevler için daha fazla alan yaratarak kullanıcı etkileşimlerinin daha hızlı olmasını sağlayabilir.

Bu modül ve somut bir kullanım alanı gösteren sonraki demo web çalışanları için geçerlidir. Demonun kendisi, bir JPEG dosyasındaki resim meta verilerini ana iş parçacığının dışında okuma işlemini gerçekleştirmek için bir web çalışanının nasıl kullanılabileceğini ve bu meta verileri kullanıcının görmesi için ana iş parçacığına nasıl geri getirebileceğinizi gösterir.

Bir web çalışanı nasıl başlatılır?

Bir web çalışanı, Worker sınıfı için bir örnek oluşturularak kaydedilir. Bunu yaptığınızda, web çalışanı kodunun nereye yerleştirileceğini belirtirsiniz. Bu kod, tarayıcının yüklenip ardından yeni bir iş parçacığı oluşturur. Ortaya çıkan iş parçacığı genellikle çalışan iş parçacığı olarak adlandırılır.

const myWebWorker = new Worker('/js/my-web-worker.js');

Ardından, çalışanın JavaScript dosyasında (bu örnekte my-web-worker.js) ayrı bir çalışan iş parçacığında çalışacak kod yazabilirsiniz.

Web çalışanı sınırlamaları

Ana iş parçacığında çalışan JavaScript'in aksine, web çalışanlarının window bağlamına doğrudan erişimi yoktur ve sağladığı API'lere sınırlı şekilde erişebilirler. Web çalışanları aşağıdaki kısıtlamalara tabidir:

  • Web çalışanları DOM'ye doğrudan erişemez.
  • Web çalışanları, window bağlamıyla mesajlaşma ardışık düzeni üzerinden iletişim kurabilir. Diğer bir deyişle, bir web çalışanı DOM'ye bir şekilde dolaylı olarak erişebilir.
  • Web çalışanı kapsamı window yerine self.
  • Web çalışanı kapsamının, JavaScript temel öğelerine ve yapılarının yanı sıra fetch gibi API'lere ve oldukça fazla sayıda başka API'ye erişimi vardır.

Web çalışanları window ile nasıl iletişim kurar?

Bir web çalışanı, bir mesajlaşma ardışık düzeni aracılığıyla ana iş parçacığının window içeriğiyle iletişim kurabilir. Bu ardışık düzen, ana iş parçacığı ve web çalışanı arasındaki verileri taşımanızı sağlar. Bir web çalışanından ana iş parçacığına veri göndermek için web çalışanının bağlamında (self) bir message etkinliği oluşturursunuz

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Ardından, ana iş parçacığındaki window bağlamındaki bir komut dosyasında, başka bir message etkinliği kullanarak web çalışanı iş parçacığından mesaj alabilirsiniz:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Web çalışanının mesajlaşma ardışık düzeni, web çalışanı bağlamından kaçma yoludur. Bu API'yi kullanarak web çalışanından window öğesine veri gönderebilir ve bu verileri DOM'u güncellemek veya ana iş parçacığında yapılması gereken diğer işleri yapmak için kullanabilirsiniz.

Bilginizi test etme

Web çalışanı hangi iş parçacığı üzerinde çalışır?

Ana ileti dizisi.
Tekrar deneyin.
Kendi ileti dizisi (web çalışanı iş parçacığı olarak da bilinir).
Doğru.
GPU ileti dizisi.
Tekrar deneyin.

Bir web çalışanı nelere erişebilir?

Diziler ve nesneler gibi temel JavaScript öğeleri.
Doğru.
fetch dahil olmak üzere window bağlamında kullanılabilen API'lerin katı bir alt kümesi.
Doğru.
window bağlamı fakat dolaylı olarak.
Doğru.

Web çalışanı "window" bağlamına nasıl erişebilir?

Doğrudan, window nesnesinin üyelerine referans vererek.
Tekrar deneyin.
Bir web çalışanı, window ürününe hiçbir şekilde erişemez.
Tekrar deneyin.
Web çalışanı bağlamında postMessage yöntemi (self) ile desteklenen bir mesajlaşma ardışık düzeni aracılığıyla.
Doğru.

Sıradaki: Somut bir web işçisi kullanım alanı

Bir sonraki modülde, somut bir web çalışanı kullanım alanı ayrıntılı olarak gösterilmiştir ve gösterilmiştir. Bu modülde, bir web çalışanı belirli bir URL'den JPEG dosyası getirmek ve bir web çalışanında Exif meta verilerini okumak için kullanılır. Bu veriler daha sonra kullanıcıya gösterilmek üzere ana ileti dizisine geri gönderilir.