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

Bu kursun içeriğinin çoğu şu kavramlara odaklanmıştır: HTML performansıyla ilgili genel değerlendirmeler, kaynak ipuçları, çeşitli reklam öğelerinin optimizasyonu İlk sayfa yükleme süresini ve kullanıcıya yanıt verme süresini iyileştirmek için kaynak türleri ve belirli kaynakları geç yükleme.

Ancak, JavaScript'e ilişkin performans konusunda henüz ele alacağız. Bu da web'de çalışanların giriş duyarlılığı üzerinde uzlaşacağız.

JavaScript genellikle tek iş parçacıklı bir dil olarak tanımlanır. Pratikte bu tarayıcı, tarayıcının kullandığı tek ileti dizisi olan ana iş parçacığına yaptığınız çalışmaların büyük bir kısmını kapatabilirsiniz. Bu çalışma, projenin yürütülmesi sırasında bazı oluşturma işlemleri, HTML ve CSS ayrıştırma gibi şeylerde çalışıyor. ve kullanıcı deneyimini yönlendiren diğer kullanıcı odaklı çalışmalardır. Aslına bakarsanız tarayıcılar, geliştirici olarak sizin yapmadığınız işlemler için diğer ileti dizilerini kullanır genellikle GPU iş parçacıklarına doğrudan erişimi vardır.

JavaScript'in söz konusu olduğu durumlarda, genellikle yalnızca ana ileti dizisidir, ancak yalnızca varsayılan olarak bulunur. Kaydolmak ve kullanmak mümkündür JavaScript'te ek iş parçacıkları. Bu özellik, birden fazla iş parçacığının oluşturulmasını JavaScript, Web Workers API olarak bilinir.

Web çalışanları, yalnızca sayfayı yapan uzun görevlere neden olmadan ana iş parçacığında çalıştırılamaz yanıt vermiyor. Bu tür görevler, web sitenizin Next Paint (INP) ile başlar. Böylece ne zaman ileri düzeyde konusunda çok az bilgi sahibi olabilirsiniz. Bu sayede, çalışmalarınız için ana ileti dizisinde başka görevler de bulunduğundan emin olun.

Bu modül ve somut bir kullanım alanını gösteren sonraki demo, birlikte çalışır. Demoda, işi yapmak için bir web çalışanını nasıl kullanabileceğiniz gösterilmektedir ana ileti dizisinden bir JPEG dosyasından okunan resim meta verilerini ve bunları Böylece meta verileri kullanıcının görmesi için ana ileti dizisine geri döndürebilir.

Web çalışanı nasıl başlatılır?

Bir web çalışanı, Worker sınıfını örneklendirerek kaydedilir. Bunu yaptığınızda Böylece, web çalışanı kodunun konumunu ve tarayıcının yüklendiği yeri belirtirsiniz ardından da yeni bir ileti dizisi oluşturur. Sonuçta ortaya çıkan iş parçacığı genellikle bir çalışan ileti dizisi oluşturun.

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

Çalışanın JavaScript dosyasında (bu örnekte my-web-worker.js) daha sonra daha sonra ayrı bir çalışan iş parçacığında çalıştırılan bir kod yazın.

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

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

• Web çalışanları, DOM'ye doğrudan erişemez.
• Web çalışanları, mesajlaşma yoluyla window bağlamıyla iletişim kurabilir ardışık düzendir. Bu, bir web çalışanının DOM'ye dolaylı olarak erişebileceği anlamına gelir.
• Web çalışanı kapsamı window yerine self.
• Web çalışanı kapsamının, JavaScript temel öğelerine erişimi vardır ve yapıların yanı sıra fetch gibi API'ler ve oldukça fazla sayıda diğer API'leri inceleyin.

Web çalışanları window ile nasıl konuşur?

Bir web çalışanı, ana iş parçacığının window ile iletişim kurabilir bağlam bilgisi sunar. Bu ardışık düzen, verileri Google'a ve Google Haritalar'a taşımanızı ana iş parçacığından ve web çalışanından. Bir web çalışanından ana iş parçacığı, web çalışanının bağlamında bir message etkinliği (self) oluşturdunuz

// 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, ileti dizisinden, başka bir message etkinliği kullanılarak ileti gönderildi:

// 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ı mesajlaşma ardışık düzeni, web'den bir tür kaçış yöntemidir çalışan bağlamına geçelim. Bu API'yi kullanarak web çalışanından window uygulamasına veri gönderebilirsiniz DOM'yi güncellemek veya üzerinde yapılması gereken diğer işlemleri gerçekleştirmek için takip edebilirsiniz.

Bilginizi test etme

Sıradaki: Web çalışanı için somut bir kullanım alanı

Bir sonraki modülde, web çalışanı için somut bir kullanım alanı ayrıntılı olarak temsil eder. Bu modülde, bir web çalışanı bir dosyadan JPEG dosyasını ve bir web çalışanında Exif meta verilerini okuyun. Bu veriler daha sonra kullanıcıya gösterilecek ana ileti dizisine geri dönmesini sağlar.