Düzen kaymalarında hata ayıklama

Bu makalenin ilk bölümü, düzen kaymalarında hata ayıklamaya yönelik araçları tartışırken, ikinci bölümde bir düzen kaymasının nedenini belirlerken kullanılacak düşünce sürecini tartışır.

Düzen Kararsızlığı API’sı #

bu Düzen Kararsızlığı API’sı düzen kaymalarını ölçmek ve raporlamak için kullanılan tarayıcı mekanizmasıdır. DevTools da dahil olmak üzere düzen kaymalarında hata ayıklamaya yönelik tüm araçlar, sonuçta Layout Instability API üzerine kuruludur. Ancak Layout Instability API’yi doğrudan kullanmak, esnekliği nedeniyle güçlü bir hata ayıklama aracıdır.

kullanım #

Kümülatif Düzen Kaymasını (CLS) ölçen aynı kod parçacığı, düzen kaymalarında hata ayıklamaya da hizmet edebilir. Aşağıdaki snippet, düzen kaymalarıyla ilgili bilgileri konsola kaydeder. Bu günlüğü incelemek size bir düzen değişikliğinin ne zaman, nerede ve nasıl gerçekleştiği hakkında bilgi verecektir.

let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});

Bu betiği çalıştırırken şunlara dikkat edin:

• bu buffered: true seçeneği, PerformanceObserver tarayıcıyı kontrol etmeli performans giriş arabelleği gözlemcinin başlatılmasından önce oluşturulan performans girişleri için. Sonuç olarak, PerformanceObserver başlatıldıktan önce ve sonra gerçekleşen düzen değişikliklerini rapor edecektir. Konsol günlüklerini incelerken bunu aklınızda bulundurun. Başlangıçtaki çok sayıda düzen değişikliği, birdenbire çok sayıda düzen değişikliğinin meydana gelmesinden ziyade, bir raporlama birikimini yansıtabilir.
• Performansı etkilemekten kaçınmak için, PerformanceObserver düzen kaymaları hakkında rapor vermek için ana iş parçacığı boşta kalana kadar bekler. Sonuç olarak, ana iş parçacığının ne kadar meşgul olduğuna bağlı olarak, bir düzen değişikliğinin gerçekleşmesi ile konsolda günlüğe kaydedilmesi arasında hafif bir gecikme olabilir.
• Bu komut dosyası, kullanıcı girişinin ardından 500 ms içinde meydana gelen düzen değişikliklerini yok sayar ve bu nedenle CLS’ye sayılmaz.

Düzen kaymalarıyla ilgili bilgiler, iki API’nin bir kombinasyonu kullanılarak raporlanır: LayoutShift Ve LayoutShiftAttribution arayüzler. Bu arayüzlerin her biri aşağıdaki bölümlerde daha ayrıntılı olarak açıklanmaktadır.

Düzen Kaydırma #

Her düzen kayması kullanılarak rapor edilir. LayoutShift arayüz. Bir girdinin içeriği şuna benzer:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

Yukarıdaki giriş, üç DOM öğesinin konum değiştirdiği bir düzen kaymasını gösterir. Bu özel düzen değişikliğinin düzen kayması puanı şuydu: 0.175.

Bunlar, bir LayoutShift hata ayıklama düzeni kaymalarıyla en alakalı örnekler:

DüzenShiftAtıf #

bu LayoutShiftAttribution arabirim, tek bir DOM öğesinin tek bir kaymasını tanımlar. Bir düzen kayması sırasında birden çok öğe değişirse, sources özellik birden fazla giriş içeriyor.

Örneğin, aşağıdaki JSON, tek kaynaklı bir düzen değişikliğine karşılık gelir: &LTdiv id='banner'> DOM öğesi y: 76 ile y:246.

// ...
"sources": [
{
"node": "div#banner",
"previousRect": {
"x": 311,
"y": 76,
"width": 4,
"height": 18,
"top": 76,
"right": 315,
"bottom": 94,
"left": 311
},
"currentRect": {
"x": 311,
"y": 246,
"width": 4,
"height": 18,
"top": 246,
"right": 315,
"bottom": 264,
"left": 311
}
}
]

bu node özelliği, kaydırılan HTML öğesini tanımlar. DevTools’ta bu özelliğin üzerine gelmek ilgili sayfa öğesini vurgular.

bu previousRect Ve currentRect özellikler, düğümün boyutunu ve konumunu bildirir.

• bu x Ve y koordinatlar, öğenin sol üst köşesinin sırasıyla x koordinatını ve y koordinatını bildirir
• bu width Ve height özellikler, öğenin sırasıyla genişliğini ve yüksekliğini bildirir.
• bu top, right, bottomVe left özellikler, öğenin verilen kenarına karşılık gelen x veya y koordinat değerlerini bildirir. Başka bir deyişle, değeri top eşittir y; değeri bottom eşittir y+height.

tüm özellikleri ise previousRect 0’a ayarlanırsa bu, öğenin görünüme geçtiği anlamına gelir. tüm özellikleri ise currentRect 0’a ayarlanırsa bu, öğenin görüş alanı dışına çıktığı anlamına gelir.

Bu çıktıları yorumlarken anlaşılması gereken en önemli şeylerden biri, öğelerin şu şekilde listelendiğidir: kaynaklar düzen kayması sırasında kaydırılan öğelerdir. Ancak, bu öğelerin düzen istikrarsızlığının “temel nedeni” ile yalnızca dolaylı olarak ilişkili olması mümkündür. İşte birkaç örnek.

Örnek 1

Bu düzen değişikliği, tek bir kaynakla bildirilir: B öğesi. Ancak, bu düzen değişikliğinin temel nedeni, A öğesinin boyutundaki değişikliktir.

Örnek 2

Bu örnekteki düzen değişikliği iki kaynakla bildirilir: A öğesi ve B öğesi. Bu düzen kaymasının temel nedeni, A öğesinin konumundaki değişikliktir.

Örnek 3

Bu örnekteki düzen değişikliği, tek bir kaynakla bildirilir: B öğesi. B öğesinin konumunun değiştirilmesi, bu düzen kaymasına neden oldu.

Örnek 4

B öğesinin boyutu değişse de, bu örnekte düzen kayması yoktur.

bir göz atın DOM değişikliklerinin Layout Instability API tarafından nasıl rapor edildiğini gösteren demo.

Geliştirme Araçları #

Performans paneli #

bu Deneyim DevTools bölmesi Verim paneli, belirli bir performans izlemesi sırasında meydana gelen tüm düzen değişikliklerini, bir kullanıcı etkileşiminden sonraki 500 ms içinde meydana gelseler ve bu nedenle CLS’ye dahil edilmeseler bile görüntüler. Belirli bir düzen kaymasının üzerine gelme Deneyim paneli, etkilenen DOM öğesini vurgular.

Düzen kaydırma hakkında daha fazla bilgi görüntülemek için düzen kaydırmaya tıklayın ve ardından Özet çekmece. Elemanın boyutlarında yapılan değişiklikler şu format kullanılarak listelenir: [width, height]; elemanın pozisyonundaki değişiklikler format kullanılarak listelenir [x,y]. bu Yakın zamanda giriş yapıldı özelliği, bir kullanıcı etkileşiminden sonraki 500 ms içinde bir düzen değişikliğinin oluşup oluşmadığını gösterir.

Düzen vardiyasının süresi hakkında bilgi için Olay günlüğü sekme. Bir düzen kaymasının süresi, şuna bakılarak da tahmin edilebilir: Deneyim kırmızı düzen kaydırma dikdörtgeninin uzunluğu için bölme.

kullanımı hakkında daha fazla bilgi için Verim paneli, bkz. Performans Analizi Referansı.

Düzen kaydırma bölgelerini vurgula #

Düzen kaydırma bölgelerini vurgulamak, bir sayfada meydana gelen düzen kaymalarının konumu ve zamanlaması hakkında hızlı, bir bakışta fikir edinmek için yararlı bir teknik olabilir.

DevTools’ta Düzen Kaydırma Bölgelerini etkinleştirmek için şu adrese gidin: Ayarlar > Diğer Araçlar > İşleme > Düzen Kaydırma Bölgeleri ardından hata ayıklamak istediğiniz sayfayı yenileyin. Düzen değiştirme alanları kısaca mor renkle vurgulanacaktır.

Düzen kaymalarının nedenini belirlemeye yönelik düşünce süreci #

Düzen kaymasının ne zaman ve nasıl gerçekleştiğinden bağımsız olarak, düzen kaymalarının nedenini belirlemek için aşağıdaki adımları kullanabilirsiniz. Bu adımlar, Lighthouse’u çalıştırarak tamamlanabilir; ancak, Lighthouse’un yalnızca ilk sayfa yükleme sırasında meydana gelen düzen değişikliklerini tanımlayabildiğini unutmayın. Ek olarak, Lighthouse yalnızca düzen kaymalarının bazı nedenleri için öneriler sağlayabilir; örneğin, belirgin genişlik ve yüksekliğe sahip olmayan görüntü öğeleri.

Düzen kaymasının nedenini belirleme #

Düzen kaymalarına aşağıdaki olaylar neden olabilir:

• Bir DOM öğesinin konumunda yapılan değişiklikler
• Bir DOM öğesinin boyutlarında yapılan değişiklikler
• Bir DOM öğesinin eklenmesi veya çıkarılması
• Düzeni tetikleyen animasyonlar

Özellikle, kaydırılan öğeden hemen önceki DOM öğesi, düzen kaymasına “neden” olma olasılığı en yüksek olan öğedir. Bu nedenle, bir düzen değişikliğinin neden meydana geldiğini araştırırken şunları göz önünde bulundurun:

• Öndeki elemanın konumu veya boyutları değişti mi?
• Kaydırılan öğeden önce bir DOM öğesi eklendi veya kaldırıldı mı?
• Kaydırılan öğenin konumu açıkça değiştirildi mi?

Önceki öğe düzen kaymasına neden olmadıysa, önceki ve yakındaki diğer öğeleri göz önünde bulundurarak aramanıza devam edin.

Ek olarak, bir düzen değişikliğinin yönü ve mesafesi, asıl neden hakkında ipuçları sağlayabilir. Örneğin, büyük bir aşağı kaydırma, genellikle bir DOM öğesinin eklenmesini gösterirken, 1 piksel veya 2 piksellik bir düzen kaydırma, genellikle çakışan CSS stillerinin uygulanmasını veya bir web yazı tipinin yüklenmesini ve uygulanmasını gösterir.

Düzen değiştirme olaylarına en sık neden olan belirli davranışlardan bazıları şunlardır:

Bir öğenin konumundaki değişiklikler (başka bir öğenin hareketinden kaynaklanmayan) #

Bu tür bir değişiklik genellikle aşağıdakilerin bir sonucudur:

• Geç yüklenen veya önceden bildirilen stillerin üzerine yazan stil sayfaları.
• Animasyon ve geçiş efektleri.

Bir elemanın boyutlarındaki değişiklikler #

Bu tür bir değişiklik genellikle aşağıdakilerin bir sonucudur:

• Geç yüklenen veya önceden bildirilen stillerin üzerine yazan stil sayfaları.
• Olmayan görüntüler ve iframe’ler width Ve height “yuvaları” oluşturulduktan sonra yüklenen nitelikler.
• olmayan metin blokları width veya height metin oluşturulduktan sonra yazı tiplerini değiştiren nitelikler.

DOM öğelerinin eklenmesi veya çıkarılması #

Bu genellikle şunlardan kaynaklanır:

• Reklamların ve diğer üçüncü taraf yerleşimlerinin eklenmesi.
• Afişlerin, uyarıların ve modellerin eklenmesi.
• Mevcut içeriğin üzerine ek içerik yükleyen sonsuz kaydırma ve diğer UX modelleri.

Düzeni tetikleyen animasyonlar #

Bazı animasyon efektleri tetik düzeni. Bunun yaygın bir örneği, DOM öğelerinin aşağıdaki gibi özellikleri artırarak “animasyona” tabi tutulmasıdır. top veya left CSS kullanmak yerine transform mülk. Daha fazla bilgi için Yüksek performanslı CSS animasyonları nasıl oluşturulur bölümünü okuyun.

Düzen kaymalarını çoğaltma #

Çoğaltamayacağınız düzen değişikliklerini düzeltemezsiniz. Sitenizin düzen kararlılığını daha iyi anlamak için yapabileceğiniz en basit ama en etkili şeylerden biri, düzen değişikliklerini tetikleyen hedefle sitenizle 5-10 dakika etkileşim kurmaktır. Bunu yaparken konsolu açık tutun ve düzen kaymalarını raporlamak için Düzen Kararsızlığı API’sini kullanın.

Yerleştirmesi zor olan düzen kaymaları için, bu alıştırmayı farklı cihazlar ve bağlantı hızlarıyla tekrarlamayı düşünün. Özellikle, daha yavaş bir bağlantı hızı kullanmak, düzen kaymalarını belirlemeyi kolaylaştırabilir. Ek olarak, bir debugger düzen vardiyalarında adım atmayı kolaylaştırmak için ifade.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Son olarak, geliştirme sırasında yeniden oluşturulamayan düzen sorunları için, bu sorunlar hakkında daha fazla bilgi toplamak için tercih ettiğiniz ön uç günlük kaydı aracınızla birlikte Layout Instability API’yi kullanmayı düşünün. örneğe göz atın bir sayfadaki en büyük kaydırılan öğenin nasıl izleneceğine ilişkin kod.