Yükleme performansı ile giriş duyarlılığı arasındaki dengeyi sağlamanıza yardımcı olabilecek yeni bir JavaScript API.
Hızlı yüklemek zor. Halihazırda içeriklerini oluşturmak için JS'den yararlanan siteler yük performansı ile giriş arasında bir denge kurmak duyarlılık: görüntülü reklamlar için gereken tüm işi hepsi aynı anda (daha iyi yükleme performansı, daha kötü giriş duyarlılığı) veya küçük görevlere ayırmanızı ve bu sayede giriş ve boyama (daha düşük yük performansı, daha iyi giriş (yanıt verme derecesi).
Bu dengeyi sağlama ihtiyacını ortadan kaldırmak için, Facebook önerdi ve uyguladı.
olmadan yanıt vermeyi iyileştirmek için Chromium'daki isInputPending()
API'yi
çok önemli. Kaynak denemesiyle ilgili geri bildirimlere dayanarak
.
87!
Tarayıcı uyumluluğu
isInputPending()
, sürüm 87'den itibaren Chromium tabanlı tarayıcılarda kullanıma sunulmuştur.
Başka hiçbir tarayıcı, API'yi gönderme niyetini göstermedi.
Arka plan
Günümüzün JS ekosistemindeki çoğu iş, ana iş parçacığı olan tek bir iş parçacığı üzerinde gerçekleştirilir. Bu, geliştiricilere sağlam bir yürütme modeli sağlar ancak kullanıcı deneyimi komut dosyası uzun bir süre boyunca çalışırsa (özellikle yanıt verebilirlik) önemli ölçüde etkilenebilir gerekir. Bir giriş etkinliği tetiklenirken sayfa çok fazla işlem yapıyorsa Örneğin, sayfa bu işlem tamamlanana kadar tıklama girişi etkinliğini işlemez gerekir.
Mevcut en iyi uygulama, bu sorunu, JavaScript'i daha küçük bloklara ayırın. Sayfa yüklenirken, ve ardından kontrolü geri vererek tarayıcıya devredildiğini gösterir. İlgili içeriği oluşturmak için kullanılan tarayıcı, giriş etkinlik sırasını kontrol edebilir ve sayfada öğrenmesi gerekir. Ardından, tarayıcı Eklenen JavaScript blokları. Bu işe yarar ancak başka sorunlara da yol açabilir.
Sayfa, tarayıcıya her kontrol sağladığında, sayfanın yeniden yüklenmesi biraz zaman alır giriş etkinlik sırasını kontrol etmek, etkinlikleri işlemek ve sonraki JavaScript bloğu. Tarayıcı etkinliklere daha hızlı yanıt verirken, sayfanın yüklenme süresi yavaşlar. Çok sık geri dönersek sayfa, çok yavaş yükleniyor. Daha az verim verirsek tarayıcının yapması daha uzun sürer. yanıt veriyor ve kullanıcıları hayal kırıklığına uğratıyor. Eğlenceli değil.
Facebook'ta, en popüler şirketlerden biri olursa nasıl bir şey
ortadan kaldıracak yeni bir yükleme yaklaşımı geliştiriyoruz. Biz
Chrome'daki arkadaşlarımıza danıştık ve teklifimizi
isInputPending()
için. isInputPending()
API,
web'deki kullanıcı girişleri için kesintiler sağlar ve JavaScript'in
tarayıcıya dönmeden girişi kontrol edebilir.
Bu API'ye gösterdiğiniz ilgiden dolayı Chrome'daki meslektaşlarımızla birlikte ve özelliği Chromium'da kullanıma sunabiliriz. Chrome'un yardımıyla yamalar, bir kaynak deneme sürecinin (Chrome'un değişiklikleri test etmesinin ve geliştiricilerden geri bildirim almasının bir yoludur) )
Kaynak denemesinden ve kanalın diğer üyelerinden geri bildirim aldık. W3C Web Performansı Çalışma Grubu ve API'de değişiklikler uyguladı.
Örnek: getiri planlayıcısı
Verilerinizi yüklemek için görüntüleme engelleme çalışmanız olduğunu
örneğin bileşenlerden işaretleme oluşturma, asalları hariç tutma veya
düzgün bir şekilde yükleniyor. Bunlardan her biri daha küçük adımlara
çalışma öğesi. Planlayıcı modelini kullanarak
processWorkQueue()
fonksiyonunda yaptığımızı varsayalım:
const DEADLINE = performance.now() + QUANTUM;
while (workQueue.length > 0) {
if (performance.now() >= DEADLINE) {
// Yield the event loop if we're out of time.
setTimeout(processWorkQueue);
return;
}
let job = workQueue.shift();
job.execute();
}
Daha sonra setTimeout()
üzerinden yeni bir makro görevde processWorkQueue()
çağrısı yaparak
tarayıcının girişe biraz duyarlı kalmasını sağlar (yani
etkinlik işleyicileri çalıştırma) ve aynı zamanda nispeten çalışmasını
kesintisiz. Fakat başka bir iş nedeniyle uzun bir süre planladığımızda
veya etkinlik döngüsünü kontrol etmek isteyen ya da fazladan QUANTUM
milisaniye
yaklaşık %10’luk bir artış sağlar.
Sorun değil ama daha iyi olabilir miyiz? Kesinlikle!
const DEADLINE = performance.now() + QUANTUM;
while (workQueue.length > 0) {
if (navigator.scheduling.isInputPending() || performance.now() >= DEADLINE) {
// Yield if we have to handle an input event, or we're out of time.
setTimeout(processWorkQueue);
return;
}
let job = workQueue.shift();
job.execute();
}
navigator.scheduling.isInputPending()
için çağrı sunarak şunları yapabiliriz:
girişlere daha hızlı yanıt verirken, görüntüleme
engelleme özelliğiyle de
kesintisiz olarak çalışır. Müşteri kimliğinizle alakalı herhangi bir
iş tamamlanana kadar girdi (örneğin, boyama) dışında,
QUANTUM
uzunluğunu da ekleyebilirsiniz.
Varsayılan olarak "sürekli"dir. etkinlikler isInputPending()
öğesinden döndürülmez. Bu
mousemove
, pointermove
ve diğerlerini içerir. Gelecekteki projelerinizde
sorun değil. isInputPending()
için bir nesne sağlayarak
includeContinuous
true
olarak ayarlandı. Artık hazırsınız:
const DEADLINE = performance.now() + QUANTUM;
const options = { includeContinuous: true };
while (workQueue.length > 0) {
if (navigator.scheduling.isInputPending(options) || performance.now() >= DEADLINE) {
// Yield if we have to handle an input event (any of them!), or we're out of time.
setTimeout(processWorkQueue);
return;
}
let job = workQueue.shift();
job.execute();
}
İşte bu kadar. React gibi çerçeveler, isInputPending()
temel zamanlama kitaplıklarının benzer bir mantığına göre yürütülmesine neden olur. Umarız bu,
Scrum ekibinizle,
isInputPending()
ürününden yararlanabilmek için bu çerçeveleri kullanan geliştiriciler
kamera arkası görüntülerine yer verir.
Getiri her zaman kötü değildir
Daha az verim almanın her kullanım için doğru çözüm olmadığını unutmamak gerekir. dava açın. Tarayıcıya kontrolün geri verilmesi için oluşturma işlemi gerçekleştirmek ve diğer komut dosyalarını çalıştırmak gibi giriş etkinliklerini yapalım.
Tarayıcının beklemedeki öğeleri doğru şekilde ilişkilendiremediği durumlar vardır
giriş etkinlikleri. Özellikle çapraz kökenler için
karmaşık klipler ve maskeler oluşturmak,
iframe'ler yanlış negatifler bildirebilir (ör. isInputPending()
beklenmedik bir şekilde dönebilir)
false (yanlış) değerini alır. Her şeyin yolunda gitmesi halinde yeterli miktarda
ve stilize edilmiş alt çerçevelerle etkileşim kurmanız gerekir.
Bir etkinlik döngüsünü paylaşan diğer sayfalara da dikkat edin. Bu tür platformlarda
birden fazla kaynağın aynı etkinliği paylaşması yaygın bir uygulamadır.
döngüde bulabilirsiniz. GirişisInputPending()
true
çapraz kaynak çerçevesini yorabilir ve dolayısıyla arka plana alınmış sayfalar,
yanıt verme hızını artırır. Getiriyi azaltmayı, ertelemeyi ya da
daha sık arka planda çalışırken Sayfa Görünürlük API'sini kullanın.
isInputPending()
ürününü dikkatli bir şekilde kullanmanızı öneririz. Herhangi bir
önce kullanıcı engelleme çalışması yapar, ardından etkinlik döngüsünde
getiri sağladığını görebilirsiniz. Uzun görevler zararlı olabilir.
Geri bildirim
- Spesifikasyonlarla ilgili geri bildirim göndermek için is-input-pending deposudur.
- @acomminos (spesifikasyon yazarlarından biri) ile iletişime geçin
Sonuç
isInputPending()
kullanıma sunulmasından ve geliştiricilerin
hemen kullanmaya başlamanız gerekiyor. Bu API, Facebook'un ilk kez bir platformdaki
ve fikri geliştirme aşamasından standartların teklifine geçirerek
bir tarayıcıda gönderim. Bunu başarmamıza yardımcı olan herkese teşekkür ederiz.
ve Chrome'da, programı başlatmamıza yardımcı olan herkese
göndereceğim!
Will H McMahan'ın hero fotoğrafı Lansmanı kaldırın.