Giriş, Birleştirici'ye geliyor
Bu, Chrome'un içindeki 4 bölümlük blog dizisinin son bölümüdür; ve bunların projeyle ilgili olarak kodumuzu kullanmanız gerekir. Önceki yayında, oluşturma işlemine değindik ve birleştirici hakkında bilgi edindik. Bu yayında, kullanıcı girişi geldiğinde birleştiricinin nasıl akıcı bir etkileşim sağladığına bakalım.
Etkinlikleri tarayıcının bakış açısından girin
"Giriş etkinlikleri"ni duyduğunuzda yalnızca metin kutusuna yazmaya veya fareye tıklama işlemini düşünebilirsiniz, Giriş, kullanıcının herhangi bir hareketi anlamına gelir. Fare tekerleğini kaydırma işlevi bir giriştir etkinlik ve dokunma veya fareyle üzerine gelme de bir giriş etkinliğidir.
Kullanıcının ekrana dokunma gibi bir hareketi gerçekleştiğinde,
hareket ettirebilirsiniz. Bununla birlikte, tarayıcı işlemi yalnızca bu hareketin nereden
bir sekmenin içeriği, oluşturucu işlemi tarafından işlenir. Tarayıcı işlemi, etkinliği
türünü (touchstart gibi) ve koordinatlarını oluşturucu işlemine yönlendirmenizi sağlar. Oluşturucu işlemi,
etkinliği uygun şekilde tanımlarsınız.
Birleştirici giriş etkinliklerini alır
Önceki gönderide, kompozitörün bir araya getirerek kaydırmayı nasıl sorunsuz bir şekilde Pikselleştirilmiş katmanlardan Sayfaya hiçbir giriş etkinliği işleyicisi yoksa Compositor iş parçacığı ana iş parçacığından tamamen bağımsız yeni bir kompozit çerçeve oluşturun. Peki ya bir olay ekli miydi? Birleştirici iş parçacığı, etkinliğin nasıl ele alınır?
Hızlı olmayan kaydırılabilir bölgeyi anlama
JavaScript çalıştırmak ana iş parçacığının işi olduğundan, bir sayfa birleştirildiğinde birleştirici iş parçacığı sayfada, "Hızlı Kaydırılamayan Bölge" olarak eklenmiş etkinlik işleyicilerin bulunduğu bir bölgesini işaretler. Ölçüt birleştirici ileti dizisi, giriş etkinliğini ana iş parçacığına göndermeyi söz konusu bölgede gerçekleşip gerçekleşmediğine bakılır. Giriş etkinliği bu bölgenin dışından gelirse birleştirici iş parçacığı, ana iş parçacığını beklemeden yeni çerçeveyi birleştirmeye devam eder.
Etkinlik işleyici yazarken dikkatli olun
Web geliştirmede yaygın olarak kullanılan bir etkinlik işleme kalıbı, etkinlik yetkilendirmesidir. Etkinlikler baloncuğu olduğundan en üstteki öğeye bir etkinlik işleyici ekleyebilir ve etkinlik hedefine göre görevler atayabilirsiniz. Siz aşağıdaki gibi bir kod görmüş veya yazmış olabilir.
document.body.addEventListener('touchstart', event => {
if (event.target === area) {
event.preventDefault();
}
});
Tüm öğeler için yalnızca bir etkinlik işleyici yazmanız gerektiğinden bu etkinliğin ergonomisi cazip görünmektedir. Ancak bu koda tarayıcının görünümündeyken, artık sayfanın tamamı hızlı kaydırılamayan bir bölge olarak işaretlenir. Bu, iletişim aracınız birleştirici iş parçacığının, sayfanın belirli bölümlerinden gelen girişleri ana iş parçacığıyla iletişim kurar ve her giriş etkinliği geldiğinde bunu bekler. Dolayısıyla, birleştiricinin yumuşak kaydırma yeteneği geçersiz kılınmıştır.
Bu durumu azaltmak için etkinliğinizde passive: true seçeneği iletebilirsiniz
dinleyicidir. Bu, tarayıcı için ana iş parçacığındaki etkinliği dinlemeyi hâlâ istediğiniz ipucu verir:
ancak birleştirici devam edip yeni kareyi de
birleştirebilir.
document.body.addEventListener('touchstart', event => {
if (event.target === area) {
event.preventDefault()
}
}, {passive: true});
Etkinliğin iptal edilebilir olup olmadığını kontrol etme
Bir sayfada, kaydırma yönünü yalnızca yatay kaydırmayla sınırlamak istediğiniz bir kutu olduğunu düşünün.
İşaretçi etkinliğinizde passive: true seçeneğini kullandığınızda sayfa kaydırma işlemi daha akıcı olsa da
Dikey kaydırmayı sınırlamak için preventDefault istediğiniz zamanda başlamış olabilir
kaydırma yönünü değiştirin. Bunu, event.cancelable yöntemini kullanarak kontrol edebilirsiniz.
document.body.addEventListener('pointermove', event => {
if (event.cancelable) {
event.preventDefault(); // block the native scroll
/*
* do what you want the application to do here
*/
}
}, {passive: true});
Alternatif olarak, etkinlik işleyiciyi tamamen kaldırmak için touch-action gibi bir CSS kuralı da kullanabilirsiniz.
#area {
touch-action: pan-x;
}
Etkinlik hedefini bulma
Birleştirici iş parçacığı, ana iş parçacığına bir giriş etkinliği gönderdiğinde çalıştırılacak ilk şey bir isabettir test edin. İsabet testi, oluşturma sırasında oluşturulan boyama kaydı verilerini kullanır işleminin gerçekleştiği nokta koordinatlarının altında neyin bulunduğunu öğrenmenizi sağlar.
Ana iş parçacığına etkinlik gönderme sayısını en aza indirme
Bir önceki gönderide, tipik ekranlarımızın ekranı saniyede 60 kez nasıl yenilediğinden tutarlı bir animasyona nasıl ayak uydurduğumuzu açıklayacağım. Giriş için, tipik bir dokunmatik ekran normal bir fare ise dokunma etkinliğini saniyede 60-120 kez, ortalama bir fare ise 100 kez tıklayın. Giriş etkinliğinin kalitesi, ekranımızın yenileyebileceğinden daha yüksek.
touchmove gibi sürekli bir etkinlik ana ileti dizisine saniyede 120 kez gönderildiyse
sitenizin ne kadar yavaş olduğuna kıyasla çok fazla isabet testini ve JavaScript yürütülmesini tetikleyebilir.
yenilenebilir.
Ana iş parçacığına yapılan aşırı çağrıları en aza indirmek için Chrome, sürekli etkinlikleri (ör.
wheel, mousewheel, mousemove, pointermove, touchmove) ve gönderimin gecikmesine neden olan süre:
bir sonraki requestAnimationFrame'den hemen önce.
keydown, keyup, mouseup, mousedown, touchstart ve touchend gibi herhangi bir ayrı etkinlik
hemen gönderilir.
Çerçeve içi etkinlikleri almak için getCoalescedEvents kullanın
Çoğu web uygulamasında iyi bir kullanıcı deneyimi sunmak için birleştirilen etkinlikler yeterli olacaktır.
Ancak, uygulama çizimi gibi bir şey oluşturuyorsanız ve
touchmove koordinatları, düz bir çizgi çizmek için koordinatlar arasında kaybolabilir. Böyle bir durumda,
bu öğeler hakkında bilgi almak için işaretçi etkinliğinde getCoalescedEvents yöntemini kullanabilirsiniz
bir araya getirilmiş etkinliklerdir.
window.addEventListener('pointermove', event => {
const events = event.getCoalescedEvents();
for (let event of events) {
const x = event.pageX;
const y = event.pageY;
// draw a line using x and y coordinates.
}
});
Sonraki adımlar
Bu dizide, web tarayıcısının iç işleyişini ele aldık. Daha önce
Geliştirici Araçları, etkinlik işleyicinize {passive: true} eklemenizi veya async neden yazmanız gerektiğini önerir.
özelliğini eklemenizin yeterli olduğunu umuyorum. Bu seri, umarım bu seri, bir tarayıcının bunlara neden
daha hızlı ve akıcı bir web deneyimi sağlamak için Google Analytics 360 API'yi kullanır.
Lighthouse'u kullan
Kodunuzun tarayıcı için uygun olmasını istiyorsanız ancak nereden başlayacağınızı bilmiyorsanız Lighthouse, herhangi bir web sitesini denetlemenizi sağlayan ve size nelerin doğru yapıldığını ve nelerin iyileştirilmesi gerektiğini raporlayın. Denetim listesini okuma tarayıcının ne tür konulara önem verdiği konusunda da size bir fikir verir.
Performansı nasıl ölçeceğinizi öğrenin
Performans ayarlamaları farklı siteler için değişiklik gösterebilir. Bu nedenle, performansı ölçmeniz son derece önemlidir. ve siteniz için en uygun olanı belirleyebilirsiniz. Chrome Geliştirici Araçları ekibinin, Sitenizin performansını ölçme hakkında daha fazla bilgi edinin.
Sitenize Özellik Politikası ekleme
Ek bir adım atmak isterseniz Özellik Politikası,
proje oluştururken size engel olabilecek bir web platformu özelliğidir. Açılıyor
Özellik politikası, uygulamanızın belirli davranışlarını garanti eder ve hata yapmanızı önler.
Örneğin, uygulamanızın ayrıştırmayı hiçbir zaman engellememesini istiyorsanız uygulamanızı
eşzamanlı komut dosyaları politikası. sync-script: 'none' etkinleştirildiğinde ayrıştırıcı engelleyici JavaScript
bazı işaretler bulabilirsiniz. Bu, herhangi bir kodunuzun ayrıştırıcıyı engellemesini önler ve
tarayıcının ayrıştırıcıyı duraklatması gerekmez.
Son adım
Web sitesi oluşturmaya başladığımda neredeyse yalnızca kodumu nasıl yazacağım, nelerin ne olacağı ve daha üretken olmamı sağlardı. Bunlar çok önemlidir, ancak her şeyi nasıl tarayıcı yazdığımız kodu alır. Modern tarayıcılar, bugüne kadar yaptığımız her türlü kullanıcılara daha iyi bir web deneyimi sağlar. Tarayıcı için iyi davranmak, kodumuzu düzenleyerek kullanıcı deneyiminizi de geliştirir. Umarım tarayıcılara karşı iyi olma görevinde bana katılırsınız!
Bu serinin ilk taslaklarını inceleyen herkese çok teşekkür ederiz. Bunlardan bazıları (ancak bunlarla sınırlı olmamak üzere) alıcı): Alex Russell, Paul Ireland, Meggin Kearney, Ercan Bidelman, Mathias Bynens, Addy Osmani, Kinuko Yasuda, Nasko Oskov, ve Charlie Reis.
Bu seriyi beğendiniz mi? Gelecekteki gönderi için herhangi bir sorunuz veya öneriniz olursa Görüşlerinizi öğrenmek için aşağıdaki yorum bölümünü kullanabilir veya @kosamari adresine e-posta gönderebilirsiniz.