Özet: DOM öğelerinizi yeniden kullanın ve görünüm. Geciken verileri hesaba katmak için yer tutucular kullanın. Buradan demo ve sonsuza kadar kodu kaydırma çubuğu.
İnternetin her yerinde sonsuz kaydırıcılar görünüyor. Google Music sanatçı listesi Facebook'un zaman çizelgesi, Twitter'ın canlı feed'i de bir tane. Siz Ekranı aşağı kaydırın ve daha alta gelmeden önce yeni içerik sihirli bir şekilde görünür. bir yerdeymiş gibi görünüyor. Bu, kullanıcılar için sorunsuz bir deneyim sunar ve itirazı inceleyin.
Bununla birlikte, bir sonsuz kaydırma aracının arkasındaki teknik zorluk, bundan daha zordur görünüyor. The Right ThingTM'i yapmak istediğinizde karşılaştığınız problem yelpazesi çok büyük. Altbilgideki bağlantıların ilk birkaç saniye içinde içerik sürekli altbilgiyi itip uzağa ittiği için bunlara ulaşılamaz. Ancak ve problemler zorlaşıyor. Bir kullanıcı cihazını döndürdüğünde yeniden boyutlandırma etkinliğini nasıl yönetirsiniz? dikey moddan yatay moda veya telefonunuzun sürtünmesini nasıl önlüyorsunuz? liste çok uzadığında durabilir mi?
Doğru şeyTM
Bunun, referans uygulaması oluşturmak için yeterli bir neden olduğunu düşündük. yeniden kullanılabilir bir şekilde nasıl ele alabileceğinizi gösteren performansı sürdürmenizi sağlar.
Hedefimize ulaşmak için 3 teknik kullanacağız: DOM geri dönüşümü, mezar taşları ve kaydırma sabitleme.
Demo kılıfımız, sayfayı aşağı kaydırarak tercih edebilirsiniz. İhtiyacımız olan ilk şey sınırsız bir sohbet kaynağına mesaj. Teknik olarak, sonsuz kaydırıcıların hiçbiri gerçekten sonsuzdur ancak bu sorulara girebileceğimiz veri miktarı daha iyi olur. Basitlik açısından, sadece bir dosyayı sabit kodla sohbet mesajlarını düzenleyin ve şu adresten mesaj, yazar ve ara sıra resim eki seçin: biraz daha fazla davranmak için yapay gecikme ile rastgele gerçek ağ.
DOM geri dönüşümü
DOM geri dönüştürme, DOM düğümü sayısını düşük tutmak için yeterince kullanılmayan bir tekniktir. İlgili içeriği oluşturmak için kullanılan genel fikir, önceden oluşturulmuş DOM öğelerini ekranın dışında tutmaktır oluşturmaya karar verdi. DOM düğümlerinin ucuz olduğu kabul edilir, ancak her biri bellek, düzen, stil ve boyama açısından ekstra maliyet getirdiğinden ücretsiz değildir. Düşük kaliteli cihazlar, tamamen kullanılamayacaksa önemli ölçüde yavaşlar. web sitesi yönetilemeyecek kadar büyük bir DOM'ye sahip. Ayrıca her anahtar kelime için ve yeniden uygulanması (sınıf her seferinde tetiklenen bir süreç) Bir düğüme eklenir veya bir düğümden kaldırılır. Bu durum, daha büyük bir DOM ile daha pahalı hale gelir. DOM düğümlerinizi geri dönüştürürseniz toplam DOM sayısını düğümleri önemli ölçüde azaltarak tüm bu süreçleri hızlandırıyor.
İlk zorluk, kaydırma işleminin kendisidir. Yalnızca küçük bir alt kümemiz olacağı için eklemek için başka bir yöntem bulmamız gerekir, yani DOM'de sayfada bulunan içerik miktarını doğru bir şekilde yansıtmasını sağlamak için teorik olarak var. Bir dönüşüm ile 1 x 1 piksel boyutunda bir sentinel öğesi kullanacağız (podyum) öğeleri içeren öğeyi istediğiniz yükseklik. Pistteki her bir bileşeni kendi katmanına tanıtacağız. pistin tamamen boş olması gerekir. Arka plan rengi yok, hiçbir şey. Podyumun katmanı boş değilse tarayıcının ve kaplanmış bir doku saklamamız gerekir. yüksekliğinde iki yüz bin piksel olabilir. Kesinlikle geçerli değil: mobil cihaz
Kaydırırken, görüntü alanının Pistin bitmesini bekliyorum. Bu durumda, koruyucuyu taşıyarak pist süresini uzatacağız. öğesini görüyorsanız ve görüntü alanından ayrılan öğeleri, görünümün en altına yeni içeriklerle doldurduk.
Aynısı, diğer yönde kaydırma için de geçerlidir. Ancak biz hiçbir zaman uygulamamızda pisti daraltarak kaydırma çubuğunun konumunun tutarlıdır.
Tombstone'lar
Daha önce de belirttiğimiz gibi, veri kaynağımızı genellikle hayal edin. Ağ gecikmesi ve diğer özellikler. Yani, kullanıcılar kısa kaydırmadan yararlanır, son öğeyi kolayca kaydırabilirler verilerimiz var. Bu durumda, bir mezar taşından melodi parçasını yer tutucudur. Bu öğe, dosya yüklendikten sonra öğe ile gerçek içerikle değiştirilir verileri ulaştı. Ayrıca geri dönüştürülmüş mezar taşları DOM öğelerine ekleyebilirsiniz. Programdan iyi bir geçiş yapabilmek için içeriğin doldurulduğuna göre, aksi takdirde çok dikkatlerini kaybetmesine neden olabilir ve dikkatlerini dağıtabilecek üzerine konuşacağım.
Buradaki ilginç bir zorluk, gerçek öğelerin gerçek öğelerin yüksekliğine her öğe için farklı miktarlarda metin veya ekli görüntüsüdür. Bu sorunu çözmek için, her seferinde mevcut kaydırma konumunu ayarlayacağız. görüntü alanının üzerinde bir mezar taşı değiştiriliyor, çapa kaydırma konumunu piksel değeri yerine bir öğeye ayarlar. Bu kavram kaydırma sabitleme olarak adlandırılır.
Kaydırma sabitleme
Kaydırma sabitleme özelliğimiz, hem mezar taşları yerine pencere yeniden boyutlandırıldığında (cihazlar yeniden boyutlandırıldığında da döndürülüyor!). Reklam gruplarındaki en görünür öğenin ne olduğunu en iyisidir. Bu öğe yalnızca kısmen görülebileceğinden, ofseti, görüntü alanının başladığı öğenin üst kısmından uzaklaştırın.
Görüntü alanı yeniden boyutlandırılırsa ve pistte değişiklik olursa yeni bir kullanıcıyla görsel olarak aynı hissi veren durumlar olabilir. Kazanın! Yeniden boyutlandırılanlar hariç her bir öğenin yüksekliğinin değişmiş olabileceği anlamına gelir. Bu durumda, sabit içeriğin ne kadar aşağı yerleştirilmesi gerektiğini biliyor musunuz? Böyle bir durum söz konusu değil. Bunu öğrenmek için her öğeyi sabit öğenin üzerine koymamız ve tüm öğeleri yüksek seviyeler; bu durum, yeniden boyutlandırmadan sonra önemli bir duraklamaya neden olabilir. istiyorum. Bunun yerine yukarıdaki her öğenin aynı bedende olduğunu varsayarız. bir yapı taşı olarak ayarlıyoruz ve kayma konumumuzu buna göre ayarlayabiliriz. Öğeler sonra podyuma girdik, kaydırma konumumuzu ayarlayın ve gereken zamanda çalışmasını sağlar.
Düzen
Önemli bir ayrıntıyı atladım: Düzen. Bir DOM öğesinin her geri dönüşümü bu da bizi hedefin çok daha aşağılara taşıyacak bir köprü saniyede 60 kare hedefi. Bunu önlemek için ve dönüşümlerle birlikte kesinlikle konumlandırılmış öğeler kullanıyoruz. Bu şekilde, podyumun daha üst tarafındaki tüm öğelerin hâlâ aynı yerde olduğunu aslında yalnızca boş bir alan olduğunda yer kaplar. Proje yönetiminin her bir öğenin sonuçlandığı konumları önbelleğe alabilir ve Kullanıcı geriye doğru kaydırdığında önbellekten doğru öğeyi hemen yükler.
İdeal olarak, öğeler DOM'ye eklendikten sonra yalnızca bir kez yeniden boyanır. ve podyuma başka öğelerin eklenmesi veya çıkarılmasıyla şaşırtmayın. Yani mümkündü ama yalnızca modern tarayıcılarda.
Yeni ince ayarlar
Kısa bir süre önce Chrome, bir özellik olan
geliştiricilerin tarayıcıya bir öğenin bir sınır olduğunu söylemesine olanak tanıyan
ve boyanın arka planını görebilirsiniz. Burada düzeni kendimiz yaptığımız için
amacıyla yapılan incelemedir. Piste bir öğe eklediğimizde, bunu biliyoruz
diğer öğelerin geçişten etkilenmesi gerekmez. Yani her öğe
contain: layout alın. Web sitemizin geri kalanını da etkilemek istemiyoruz.
Bu nedenle pistin kendisi de bu stil yönergesini almalıdır.
Bir diğer yöntem de
IntersectionObservers özelliğini kullanarak,
Kullanıcı, öğeleri geri dönüştürmeye başlamamız ve yenilerini yüklememiz için sayfayı yeterince kaydırdığında
dışı verilerdir. Bununla birlikte, IntersectionObserver öğelerinin yüksek gecikmeli olduğu belirtilir (örneğin,
requestIdleCallback kullanarak yaptığımız için daha az duyarlı
hissedebiliriz.
IntersectionObservers kullanmadığından emin olun. Hatta Google Etiket Yöneticisi'ni kullanarak
scroll etkinliği bu sorundan etkileniyor, çünkü kaydırma etkinlikleri
“en iyi çaba” esasına dayanıyor. Sonunda Houdini's Compositor Worklet
söz konusu soruna en uygun çözüm olacaktır.
Hâlâ mükemmel değil
Şu anki DOM geri dönüştürme uygulamamız, tüm öğelerin eklenmesine neden olduğu için ideal değil sadece görünenlerle ilgilenmek yerine görüntü alanından geçen aslında ekranda. Yani gerçekten hızlı kaydırdığınızda Chrome'da düzen ve boyama için o kadar fazla işlem yapılıyor ki ayakta kalamıyor. Sona ereceksiniz hiçbir şey göremeyeceklerini fark ediyor. Dünyanın sonu değil, kesinlikle iyileştirebileceğimiz bir şey.
Umarız siz bunu yapmak istediğinizde basit sorunların ne kadar zorlayıcı olabileceğini mükemmel bir kullanıcı deneyimini yüksek performans standartlarıyla bir araya getirir. Entegre Progresif Web Uygulamaları, cep telefonlarında temel deneyimler haline geliyor. daha önemli hale gelecektir ve web geliştiricileri, bu yeni hizmeti geliştirmek için ve performans kısıtlamalarına uyan kalıplar kullanarak başarılı sonuçlar elde edebilir.
Kodun tamamını depomuzda bulabilirsiniz. Bizler, yeniden kullanılabilir olması için elimizden geleni yapıyoruz, ancak bunu şurada gerçek bir kitaplık olarak yayınlayamayız: npm veya ayrı bir depo olarak sunulur. Asıl kullanım amacı eğitimdir.