Modern web tarayıcısına yakından bakış (4. bölüm)

Mariko Kosaka

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.

giriş etkinliği
Şekil 1: Tarayıcı işlemi aracılığıyla oluşturucu işlemine yönlendirilen giriş etkinliği

Birleştirici giriş etkinliklerini alır

Şekil 2: Sayfa katmanlarının üzerinde görüntülenen görüntü alanı

Ö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.

hızlı kaydırılamayan sınırlı bölge
Şekil 3: Hızlı olmayan kaydırılabilir bölge için açıklanan girişin diyagramı

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.

tam sayfa hızlı kaydırılamayan bölge
Şekil 4: Tüm sayfayı kapsayan hızlı kaydırılabilir olmayan bölgeye yönelik açıklanan girişin diyagramı

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

sayfa kaydırma
Şekil 5: Sayfanın bir bölümü yatay kaydırmaya sabitlenmiş bir web sayfası

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

isabet testi
Şekil 6: Boya kayıtlarına bakan ve x.y noktasında neyin çizildiğini soran ana iş parçacığı

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şlemi, etkinliğin gerçekleştiği nokta koordinatlarının altında ne olduğunu bulmak için kullanır.

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.

filtrelenmemiş etkinlikler
Şekil 7: Çerçeve zaman çizelgesini taşarak sayfa kaybına neden olan etkinlikler

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önderme zamanındaki gecikmeler bir sonraki requestAnimationFrame'den hemen önce.

birleştirilmiş etkinlikler
8. Şekil: Zaman çizelgesi öncekiyle aynı ancak etkinlik birleştirilir ve gecikir

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.

getCoalescedEvents
Şekil 9: Solda yumuşak dokunma hareketi yolu, sağda birleştirilmiş sınırlı yol
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 eklemeniz gerektiğini umuyorum. Bu seri, umarım bu seri, bir tarayıcıda bu özelliklerin 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 çok ö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

teşekkür ederim

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.