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
yerineself
. - 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
Bir web çalışanı hangi iş parçacığı üzerinde çalışır?
Web çalışanı nelere erişebilir?
window
bağlamında kullanılabilen katı bir API alt kümesi
fetch
dahil.
window
bağlamı, yalnızca dolaylı olarak.Web çalışanı "pencere" bağlamına nasıl erişebilir?
postMessage
tarafından sağlanan mesajlaşma hattı üzerinden
yöntemini çağırın (self
).
window
uygulamasına hiçbir şekilde erişemez.
window
nesnesinin üyelerine referans vererek.
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.