Düzen, tarayıcının öğelere ilişkin geometrik bilgileri (öğelerin boyutları ve sayfadaki konumları) belirlediği yerdir. Her öğe, kullanılan CSS'ye, öğenin içeriğine veya bir üst öğeye bağlı olarak açık veya örtülü boyutlandırma bilgilerine sahip olur. Bu işlem, Chrome'da Düzen olarak adlandırılır.
Düzen, tarayıcının öğelere ilişkin geometrik bilgileri (boyutları ve sayfadaki konumları) belirlediği yerdir. Her öğe, kullanılan CSS'ye, öğenin içeriğine veya bir üst öğeye bağlı olarak açık veya örtülü boyutlandırma bilgilerine sahip olur. Bu işlem, Chrome'da Düzen (ve Edge gibi türetilmiş tarayıcılar) ve Safari olarak adlandırılır. Firefox'ta buna Yeniden Düzenleme adı verilir, ancak işlem fiilen aynıdır.
Stil hesaplamalarına benzer şekilde, düzen maliyetiyle ilgili anlık endişeler şunlardır:
- Düzen gerektiren öğelerin sayısı (sayfanın DOM boyutunun bir yan ürünü).
- 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 taşmasından kaçının. Stil değerlerini okuyup stil değişiklikleri yapın.
Düzenin etkileşim gecikmesi üzerindeki etkileri
Kullanıcı sayfayla etkileşimde bulunduğunda bu etkileşimler olabildiğince hızlı olmalıdır. Bir etkileşimin tamamlanması için gereken süre (tarayıcı, etkileşimin sonuçlarını göstermek üzere bir sonraki kareyi sunduğunda sona erme), etkileşim gecikmesi olarak bilinir. Bu, Sonraki Boyamayla Etkileşim metriğinin ölçtüğü sayfa performansı unsurudur.
Bir kullanıcı etkileşimine yanıt olarak tarayıcının bir sonraki kareyi sunması için gereken süre, etkileşimin sunum gecikmesi olarak bilinir. Etkileşimin amacı, kullanıcıya bir şey olduğunu bildirmek için görsel geri bildirim sağlamaktır ve görsel güncellemeler bu hedefe ulaşmak için bir miktar sayfa düzeni çalışması içerebilir.
Web sitenizin INP'sini mümkün olduğunca düşük tutmak için, sayfa düzeninden mümkün olduğunca uzak durmak önemlidir. Düzenden tamamen kaçınılması mümkün değilse tarayıcının sonraki kareyi hızlı bir şekilde sunabilmesi için bu düzen çalışmasının sınırlandırılması ö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ı gerektirip gerektirmediğini ve bu oluşturma ağacının güncellenmesini kontrol eder. Genişlik, yükseklik, sol veya üst gibi "geometrik özelliklerde" yapılan değişikliklerin tümü için düzen gerekir.
.box {
width: 20px;
height: 20px;
}
/**
* Changing width and height
* triggers layout.
*/
.box--expanded {
width: 200px;
height: 350px;
}
Düzen hemen hemen her zaman dokümanın tamamını kapsar. Çok sayıda öğeniz varsa hepsinin konumlarını ve boyutlarını belirlemek uzun sürer.
Düzenden kaçınmak mümkün değilse, önemli olan bir kez daha Chrome Geliştirici Araçları'nı kullanarak sürecin ne kadar sürdüğünü görmek ve bir performans sorununun nedeninin düzen olup olmadığını belirlemektir. Öncelikle Geliştirici Araçları'nı açın, Zaman Çizelgesi sekmesine gidin, Kaydet'i tıklayın ve sitenizle etkileşime geçin. Kaydı durdurduğunuzda sitenizin nasıl performans gösterdiğine dair bir döküm görürsünüz:
Yukarıdaki örnekte verilen izini ayrıntılı olarak incelerken, her kare için düzen içinde 28 milisaniyeden uzun bir sürenin geçtiğini görüyoruz. Bu, bir animasyonda ekranda kareye yer vermek için 16 milisaniyemiz varken çok yüksek bir miktardır. Ayrıca, Geliştirici Araçları'nın ağaç boyutunu (bu örnekte 1.618 öğe) ve kaç tane düğümün düzene ihtiyacı olduğunu (bu örnekte 5 tane) belirteceğini görebilirsiniz.
Buradaki genel önerinin, mümkün olduğunca sayfa düzeninden kaçınmak olduğunu unutmayın. Ancak düzenden kaçınmak her zaman mümkün olmayabilir. Düzenden kaçınamadığınız durumlarda, düzen maliyetinin DOM boyutuyla bir ilişkisi olduğunu unutmayın. İkisi arasındaki ilişki sıkı sıkıya bağlı olmasa da, daha büyük DOM'ler genellikle daha yüksek düzen maliyetlerine neden olur.
Zorunlu eşzamanlı düzenlerden kaçının
Bir kareyi ekrana gönderirken şu sipariş geçerlidir:
Önce JavaScript çalışır, ardından stil hesaplamaları, sonra düzen. Bununla birlikte, bir tarayıcıyı JavaScript kullanarak daha erken düzende çalışmaya zorlamak mümkündür. Buna zorunlu eşzamanlı düzen adı verilir.
Unutulmaması gereken ilk şey, JavaScript çalıştırdıkça önceki karedeki tüm eski düzen değerlerinin bilinmesi ve sorgulamanız için kullanılabilir olduğudur. Dolayısıyla, örneğin, çerçevenin başında bir öğenin yüksekliğini (buna "kutu" diyelim) yazmak isterseniz 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);
}
Yüksekliğini sormadan önce kutunun stillerini değiştirdiyseniz sorunlar yaşanır:
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 (super-big sınıfının eklenmesi nedeniyle) uygulaması, ardından düzeni çalıştırması gerekir. Ancak o zaman doğru yüksekliği döndürebilir. Bu, gereksiz ve muhtemelen pahalı bir iştir.
Bu nedenle, stil okumalarınızı her zaman toplu olarak işlemeli ve önce bunları (tarayıcı, önceki karenin düzen değerlerini kullanabilir) daha sonra yazmalısınız:
Doğru şekilde yapılırsa 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ğu durumda, stilleri uygulayıp ardından değerleri sorgulamanız gerekmez. Son karenin değerlerini kullanmanız yeterlidir. Stil hesaplamalarını ve düzeni eşzamanlı olarak ve tarayıcının istediğinden daha önce çalıştırmak olası darboğazlardır ve normalde yapmak istemeyeceğiniz bir şey değildir.
Düzen rahatsızlığından kaçının
Zorunlu eşzamanlı düzenleri daha da kötü hale getirmenin bir yolu var: Pek çok şeyi hızla art arda 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 grubunu döngüye alır ve her paragrafın genişliğini "kutu" adlı bir öğenin genişliğiyle eşleşecek şekilde ayarlar. Yeterince zararsız görünüyor ancak sorun, döngünün her iterasyonunun bir stil değeri (box.offsetWidth) okuması ve sonra bunu hemen bir paragrafın (paragraphs[i].style.width) genişliğini güncellemek için kullanmasıdır. Döngünün bir sonraki iterasyonunda, tarayıcının en son offsetWidth isteğinden bu yana stillerin değiştiğini (önceki iterasyonda) dikkate alması gerekir. Dolayısıyla stil değişikliklerini uygulaması ve düzeni çalıştırması gerekir. Bu, her yinelemede gerçekleşecek.
Bu örneğin çözümü, değerleri bir kez daha 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 garanti etmek istiyorsanız okuma ve yazma işlemlerinizi sizin yerinize otomatik olarak gruplandıran ve zorunlu eşzamanlı düzenlerin veya düzen baskılarının yanlışlıkla tetiklenmesini önlemek üzere FastDOM'yi kullanabilirsiniz.
Hal Gatewood'un Unsplash tarafından hazırlanan hero resim.