murattunalı.

Düzen kayması riski denetçisi.

Düzen kayması riski denetçisi, yapıştırılan işaretlemede yeri önceden ayrılmamış gömülü içeriği bulur.

Düzen kayması, tarayıcı bir öğenin ne kadar yer kaplayacağını bilmeden sayfayı çizdiğinde oluşur. Görsel yüklendiğinde gerçek boyutunu alır, altındaki her şeyi aşağı iter ve okuyucu okuduğu satırı kaybeder. Tek çözümü yeri önceden ayırmaktır — `width` ve `height` öznitelikleri ya da bir en-boy oranı kuralı.

Ne aranıyor

Araç üç ayrı riski işaretliyor. Birincisi ve en yaygını, boyutu bildirilmemiş gömülü içerik: görsel, video, çerçeve ve gömülü nesne. İkincisi ekranın üstündeki ilk görselin tembel yüklenmesi — bu kayma değil gecikme üretir ama sonucu benzer şekilde kötüdür, çünkü en büyük içerik boyaması bilerek ertelenmiş olur.

Üçüncüsü yazı tipi. Bir `@font-face` bildirimi `font-display` taşımıyorsa tarayıcının varsayılan davranışı devreye girer ve yazı tipi geç yüklendiğinde metin yeniden akar. Metrik olarak eşleşen bir yedek aile seçilmediyse satır sayısı bile değişebilir ve o noktada kayma metnin kendisinden gelir. Ayrıntısı ayrı yazıldı.

Bu bir ölçüm değil

Araç düzen kaymasını ÖLÇMEZ, riskini arar. Gerçek değer ancak sayfa yüklenirken tarayıcıda, oturum penceresi mantığıyla hesaplanır ve kullanıcının kaydırma davranışına da bağlıdır. İşaretlemeye bakarak «bu sayfanın kayması şu kadar» demek mümkün değildir.

Buna karşılık riskin kaynağı neredeyse her zaman işaretlemededir ve orada bulunması ucuzdur. Ölçüm sorunu bulur, işaretleme denetimi sorunu daha oluşmadan gösterir; ikisi birbirinin yerine geçmez. Kaymanın nasıl sıfırlandığı ve kaydırma sırasındaki kör nokta ayrı anlatıldı.

Kaydırma kör noktası

Çoğu denetim aracı sayfayı yükler, ilk ekranı ölçer ve durur. Oysa kayma en çok kaydırma sırasında oluşur: tembel yüklenen görseller, sonradan beliren bölümler ve kaydırmaya bağlı animasyonlar hep ekranın altında yaşar. Bu sitede o kör nokta ölçülerek bulundu ve ayrı bir nöbetçiyle kapatıldı — kaydırma boyunca hesaplanan en kötü oturum penceresi 0,08'in altında kalmak zorunda.

Nasıl kullanılır

  1. Denetlemek istediğin bölümün işaretlemesini yapıştır
  2. Denetle'ye bas
  3. Riskli her öğe türü ve kaynağıyla listelenir

Araç tamamen tarayıcında çalışır — sunucuya veri gitmez, çerez yazılmaz.