Büyük, karmaşık düzenlerden ve kullanımı zorlaştıran düzenlerden kaçının

Düzen, tarayıcının öğeler için geometrik bilgileri (boyutlarını ve sayfadaki konumlarını) belirlediği yerdir. Her öğenin; kullanılan CSS'ye, öğenin içeriğine veya bir üst öğeye dayalı olarak açık veya örtülü boyutlandırma bilgileri olur. Bu işlem, Chrome'da Düzen olarak adlandırılır.

Düzen, tarayıcının öğeler için geometrik bilgileri, yani boyutları ve sayfadaki konumları öğrendiği yerdir. Her öğenin; kullanılan CSS'ye, öğenin içeriğine veya bir üst öğeye dayalı olarak açık veya örtülü boyutlandırma bilgileri olur. Bu işlem, Chrome'da (ve Edge gibi türetilmiş tarayıcılarda) ve Safari'de Layout olarak adlandırılır. Firefox'ta buna Yeniden Düzenleme adı verilir, ancak işlem hemen hemen aynıdır.

Stil hesaplamalarına benzer şekilde, düzen maliyetiyle ilgili endişeler şu şekildedir:

  1. Düzen gerektiren öğelerin sayısı. Bu, sayfanın DOM boyutunun bir yan ürünüdür.
  2. Bu düzenlerin karmaşıklığı.

Özet

  • Düzen, etkileşim gecikmesi üzerinde doğrudan etkiye sahiptir
  • Düzen normalde dokümanın tamamını kapsar.
  • DOM öğelerinin sayısı performansı etkiler. Mümkün olduğunda düzeni tetiklemekten kaçınmalısınız.
  • Zorunlu eşzamanlı düzenlerden ve düzen çökmesinden kaçının. Stil değerlerini okuyun ve ardından stil değişiklikleri yapın.

Düzenin etkileşim gecikmesi üzerindeki etkileri

Bir kullanıcı sayfayla etkileşime girdiğinde, bu etkileşimler mümkün olduğunca hızlı olmalıdır. Bir etkileşimin tamamlanması için geçen süre (tarayıcı, etkileşimin sonuçlarını göstermek üzere sonraki kareyi gösterdiğinde sona erer) etkileşim gecikmesi olarak bilinir. Bu, sayfa performansının Sonraki Boyamayla Etkileşim metriğinin ölçtüğü bir yönüdür.

Bir kullanıcı etkileşimine yanıt olarak tarayıcının bir sonraki kareyi sunması için geçen süre, etkileşimin sunum gecikmesi olarak bilinir. Etkileşimin amacı, kullanıcıya bir şeyin olduğunu bildirmek için görsel geri bildirim sağlamaktır. Görsel güncellemeler bu hedefe ulaşmak için bir miktar düzen çalışması gerektirebilir.

Web sitenizin INP'sini mümkün olduğunca düşük tutmak için, mümkün olduğunca sayfa düzeninden kaçınmak önemlidir. Düzeni tamamen atlatmak mümkün değilse, tarayıcının sonraki kareyi hızlı bir şekilde gösterebilmesi için bu düzen çalışmasını sınırlandırmak önemlidir.

Mümkün olduğunda düzenden kaçının

Stilleri değiştirdiğinizde, tarayıcı, değişikliklerden herhangi birinin düzenin hesaplanmasını ve bu oluşturma ağacının güncellenmesini gerektirip gerektirmediğini kontrol eder. Genişlik, yükseklik, sol veya üst gibi "geometrik özellikler"de yapılan değişikliklerin tümünde düzen gerekir.

.box {
  width: 20px;
  height: 20px;
}

/**
  * Changing width and height
  * triggers layout.
  */

.box--expanded {
  width: 200px;
  height: 350px;
}

Düzen neredeyse her zaman dokümanın tamamını kapsar. Çok sayıda öğeniz varsa bunların hepsinin yerini ve boyutlarını belirlemek uzun zaman alır.

Düzenden kaçınmak mümkün değilse yapılması gereken, Chrome Geliştirici Araçları'nı tekrar kullanarak sürecin ne kadar sürdüğünü görmek ve düzenin performans sorununa yol açıp açmadığını belirlemektir. Öncelikle Geliştirici Araçları'nı açın, Zaman Çizelgesi sekmesine gidin, Kaydet'i tıklayın ve sitenizle etkileşim kurun. Kaydı durdurduğunuzda sitenizin performansının bir dökümünü görürsünüz:

Geliştirici Araçları, Layout'ta uzun bir süre gösteriliyor.

Yukarıdaki örnekte iz incelendiğinde, her kare için düzen içinde 28 milisaniyeden fazla zaman harcandığını görüyoruz. Bir animasyonda ekrana bir karenin yerleşmesi için 16 milisaniyelik bir süremiz olduğunda, bu süre çok yüksek oluyor. Ayrıca, Geliştirici Araçları'nın ağaç boyutunu (bu örnekte 1.618 öğe) ve kaç düğümde düzene ihtiyaç olduğunu (bu örnekte 5) belirteceğini de görebilirsiniz.

Buradaki genel önerinin, mümkün olduğunda düzenden kaçınmak olduğunu ancak sayfa düzeninden her zaman kaçınmanın mümkün olmadığını unutmayın. Düzenden kaçınamayacağınız durumlarda, düzen maliyetinin DOM boyutuyla bir ilişkisi olduğunu unutmayın. İkisi arasındaki ilişki sıkı bir şekilde bağlanmasa da, daha büyük DOM'ler genellikle daha yüksek düzen maliyetlerine neden olur.

Zorunlu eşzamanlı düzenlerden kaçının

Ekrana çerçeve gönderirken şu sipariş uygulanır:

Düzen olarak flexbox kullanılıyor.

İlk olarak JavaScript çalışır, ardından stil hesaplamaları, ardından düzen. Bununla birlikte, bir tarayıcıyı JavaScript ile daha erken bir düzen oluşturmaya zorlamak mümkündür. Buna zorunlu eşzamanlı düzen adı verilir.

Unutulmaması gereken ilk şey, JavaScript çalıştığı için önceki kareye ait tüm eski düzen değerlerinin bilinmesi ve sorgulanması için kullanılabilir olmasıdır. Dolayısıyla, örneğin, çerçevenin başında bir öğenin yüksekliğini ("kutu" diyelim) yazmak istiyorsanız, aşağıdaki gibi bir kod yazabilirsiniz:

// Schedule our function to run at the start of the frame:
requestAnimationFrame(logBoxHeight);

function logBoxHeight () {
  // Gets the height of the box in pixels and logs it out:
  console.log(box.offsetHeight);
}

Kutunun yüksekliğini istemeden önce kutunun stillerini değiştirdiyseniz sorunlar ortaya çıkabilir:

function logBoxHeight () {
  box.classList.add('super-big');

  // Gets the height of the box in pixels and logs it out:
  console.log(box.offsetHeight);
}

Şimdi, yükseklik sorusunu yanıtlamak için tarayıcının önce stil değişikliğini uygulaması (super-big sınıfının eklenmesi nedeniyle) ve ardından düzeni çalıştırması gerekir. Yalnızca bu şekilde doğru yüksekliği döndürebilir. Bu, gereksiz ve maliyetli olabilecek bir iştir.

Bu nedenle, stil okumalarınızı her zaman toplu halde yapmalısınız (tarayıcı önceki karenin düzen değerlerini kullanabilir), ardından da yazma işlemleri yapın:

Doğru şekilde yapıldığında yukarıdaki işlev şöyle olur:

function logBoxHeight () {
  // Gets the height of the box in pixels and logs it out:
  console.log(box.offsetHeight);

  box.classList.add('super-big');
}

Çoğunlukla, stilleri uygulamanıza ve ardından değerleri sorgulamanıza gerek yoktur; son karenin değerlerinin kullanılması yeterli olacaktır. Stil hesaplamalarını ve düzeni eşzamanlı olarak ve tarayıcıdan daha erken çalıştırmak olası performans sorunlarına yol açar ve genellikle yapmak isteyeceğiniz bir şey değildir.

Yoğun düzen uygulanmasından kaçının

Zorunlu eşzamanlı düzenleri daha da kötü hale getirmenin bir yolu var: bunların çoğunu hızlı bir şekilde arka arkaya yapın. Şu koda göz atın:

function resizeAllParagraphsToMatchBlockWidth () {
  // Puts the browser into a read-write-read-write cycle.
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = `${box.offsetWidth}px`;
  }
}

Bu kod, bir paragraf grubunda döngüye alınır ve her paragrafın genişliğini "kutu" adı verilen bir öğenin genişliğiyle eşleşecek şekilde ayarlar. Yeterince zararsız görünüyor, ancak sorun şu ki her döngü yinelemesinin bir stil değeri (box.offsetWidth) okuması ve bunu hemen bir paragrafın genişliğini (paragraphs[i].style.width) güncellemek için kullanmasıdır. Döngünün bir sonraki yinelemesinde, tarayıcının offsetWidth tarafından son istendiğinde (bir önceki yinelemede) stillerin değiştiğini dikkate alması ve bu nedenle stil değişikliklerini uygulaması ve düzeni çalıştırması gerekir. Bu durum her yinelemede gerçekleşir.

Bu örneğin düzeltilmesi, değerleri tekrar okumak ve ardından yazmaktır:

// Read.
const width = box.offsetWidth;

function resizeAllParagraphsToMatchBlockWidth () {
  for (let i = 0; i < paragraphs.length; i++) {
    // Now write.
    paragraphs[i].style.width = `${width}px`;
  }
}

Güvenliği garantilemek istiyorsanız okuma ve yazma işlemlerinizi sizin için otomatik olarak gruplandıran ve zorunlu eşzamanlı düzenleri veya düzen karmaşasını yanlışlıkla tetiklemenizi önleyen FastDOM özelliğini kullanabilirsiniz.

Unsplash'tan Hal Gatewood tarafından hazırlanan hero resim.