Geliştirici Araçları' sürekli boyama moduyla uzun boyama sürelerinin profilini oluşturma

Paul Irish

Boya profili oluşturmak için sürekli boyama modu artık Chrome Canary'de kullanılabilir. Bu makalede, sayfa boyama süresindeki bir sorunu nasıl tespit ettiğiniz ve boyama performansındaki darboğazları tespit etmek için bu yeni aracı nasıl kullanabileceğiniz açıklanmaktadır.

Sayfanızdaki boyama süresini inceleme

Sayfanızın sorunsuz bir şekilde kaydırmadığını fark ettiniz. Sorunu ele almaya bu şekilde başlayabilirsiniz. Örneğimizde Dan Cederholm'un Things We Left On The Moon tanıtım sayfasını kullanacağız.

Web Denetleyicisi'ni açar, Zaman Çizelgesi kaydı başlatır ve sayfanızı yukarı ve aşağı kaydırırsınız. Ardından, her karede ne olduğunu gösteren dikey zaman çizelgelerine bakıyorsunuz.

Çoğu zaman boyamaya (60 fps'nin üzerindeki büyük yeşil çubuklar) harcandığını görürseniz bunun nedenini daha yakından incelemeniz gerekir. Boyalarınızı incelemek için Web Denetleyicisi'nin Boya dikdörtgenlerini göster ayarını (Web Denetleyicisi'nin sağ alt köşesindeki dişli simgesi) kullanın. Burada, Chrome'un boyadığı bölgeleri görebilirsiniz.

Chrome'un sayfanın bazı bölümlerini yeniden boyamasının farklı nedenleri vardır:

• DOM düğümleri JavaScript'te değiştirilir. Bu durum, Chrome'un sayfa düzenini yeniden hesaplamasına neden olur.
• Animasyonlar, kareye dayalı bir döngüde güncellenen şekilde oynatılır.
• Fareyle üzerine gelme gibi kullanıcı etkileşimi, belirli öğelerde stil değişikliklerine neden olur.
• Sayfa düzeninin değişmesine neden olan diğer tüm işlemler.

Geliştirici olarak, sayfanızdaki yeniden boyama işlemlerinin farkında olmanız gerekir. Boya dikdörtgenlerine bakmak bunu yapmanın harika bir yoludur. Yukarıdaki örnek ekran görüntüsünde, tüm ekranın büyük bir dikdörtgenle kaplandığını görebilirsiniz. Bu durum, siz kaydırdıkça tüm ekranın yeniden boyandığı anlamına gelir ve bu iyi bir durum değildir. Bu örnekte, bu durum background-attachment:fixed CSS stilinden kaynaklanmaktadır. Bu stil, siz sayfayı kaydırdıkça sayfanın arka plan resminin aynı konumda kalmasına neden olur.

Yeniden boyamanın büyük bir alanı kapladığını ve/veya uzun sürdüğünü tespit ederseniz iki seçeneğiniz vardır:

1. Resim miktarını azaltmak için sayfa düzenini değiştirmeyi deneyebilirsiniz. Mümkünse Chrome, görünür sayfayı yalnızca bir kez boyaır ve siz sayfayı aşağı kaydırırken görünmeyen bölümler ekler. Ancak Chrome'un bazı alanları yeniden boyaması gereken durumlar da olabilir. Örneğin, genellikle aynı konumda kalan gezinme öğeleri için kullanılan position:fixed CSS kuralı, bu yeniden boyamalara neden olabilir.
2. Sayfa düzeninizi korumak istiyorsanız yeniden boyanan alanların boyama maliyetini azaltmayı deneyebilirsiniz. Her CSS stilinin boyama maliyeti aynı değildir. Bazılarının belirli bir etkisi vardır, bazılarınınki ise büyüktür. Belirli stillerin boyama maliyetlerini hesaplamak çok uzun bir iş olabilir. Bunun için Öğeler panelindeki stilleri açıp kapatabilir ve Zaman Çizelgesi kaydındaki farka bakabilirsiniz. Paneller arasında geçiş yapıp çok sayıda kayıt yapabilirsiniz. Bu noktada sürekli boyama modu devreye girer.

Sürekli boyama modu

Sürekli boyama modu, sayfadaki hangi öğelerin maliyetli olduğunu belirlemenize yardımcı olan bir araçtır. Sayfayı sürekli yeniden boyama durumuna geçirerek ne kadar boya işinin olduğuna dair bir sayaç gösterir. Daha sonra, neyin yavaş olduğunu anlamak için sayacı izleyerek öğeleri gizleyebilir ve stilleri değiştirebilirsiniz.

Kurulum

Sürekli boyama modunu kullanabilmek için Chrome Canary'yi kullanmanız gerekir.

Linux sistemlerinde (ve bazı Mac'lerde) Chrome'un birleştirme modunda çalıştığından emin olmanız gerekir. Bu, about:flags ürününde Tüm sayfalarda GPU birleştirme ayarı kullanılarak kalıcı olarak etkinleştirilebilir.

Nasıl Başlangıç?

Sürekli boyama modu, Web Denetleyicisi ayarlarındaki (Web Denetleyicisi'nin sağ alt köşesindeki dişli simgesi) Sürekli sayfa yeniden boyamayı etkinleştir onay kutusu kullanılarak etkinleştirilebilir.

Sağ üst köşedeki küçük ekranda, ölçülen boyama süreleri milisaniye cinsinden gösterilir. Daha açık şekilde belirtmek gerekirse:

• Solda ölçülen son boyama süresi.
• Sağdaki geçerli grafiğin minimum ve maksimum değerleri.
• En alttaki son 80 karenin geçmişini gösteren çubuk grafik (grafikteki çizgi, referans noktası olarak 16 ms'yi gösterir).

Boyama süresi ölçümleri ekran çözünürlüğüne, pencere boyutuna ve Chrome'un üzerinde çalıştığı donanıma bağlıdır. Bunların kullanıcılarınız için farklı olabileceğini unutmayın.

İş akışı

Boyama maliyeti fazla olan öğeleri ve stilleri bulmak için sürekli boyama modunu şu şekilde kullanabilirsiniz:

1. Web Denetleyicisi ayarlarını açın ve Sürekli sayfa yeniden boyamayı etkinleştir'i işaretleyin.
2. Öğeler paneline gidin ve ok tuşlarını kullanarak veya sayfadaki öğeleri seçerek DOM ağacını gezin.
3. Bir öğenin görünürlüğünü açıp kapatmak için yeni kullanıma sunulan yardımcı H klavye kısayolunu kullanın.
4. Boyama süresi grafiğine bakın ve boyanın uzun sürmesini sağlayan bir öğe bulmaya çalışın.
5. Grafiğe bakarken öğenin CSS stilleri arasında geçiş yapın ve yavaşlamaya neden olan stili bulmak için bu stilleri açıp kapatın.
6. Bu stili değiştirin ve sayfanın daha iyi performans gösterip göstermediğini kontrol etmek için başka bir Zaman Çizelgesi kaydı yapın.

Aşağıdaki animasyonda, açma/kapatma stilleri ve bunun boyama süresi üzerindeki etkisi gösterilmektedir:

Bu örnekte, box-shadow veya border-radius CSS stillerinden birini devre dışı bırakmanın boyama süresini nasıl büyük ölçüde azalttığı gösterilmektedir. Bir öğede hem box-shadow hem de border-radius kullanılması, Chrome bunun için optimizasyon yapamayacağından çok pahalı boyama işlemlerine neden olur. Dolayısıyla, örnekte olduğu gibi çok sayıda yeniden boyanan bir öğeniz varsa bu kombinasyondan kaçınmalısınız.

Notlar

Sürekli boyama modu, görünür sayfanın tamamını yeniden boyaır. Bu durum genellikle bir web sayfasına göz atarken yaşanmaz. Kaydırma genellikle yalnızca daha önce görünmeyen kısımları boyar. Sayfadaki diğer değişikliklerde ise yalnızca mümkün olan en küçük alan yeniden boyanır. Bu nedenle, stil iyileştirmelerinin sayfanızın boya süresini gerçekten etkileyip etkilemediğini başka bir Zaman Çizelgesi kaydı ile kontrol edin.

continuous painting mode kullanırken (ör. CSS stillerinin border-radius ve box-shadow) çok fazla boyama süresi getirdiğini keşfedebilirsiniz. Genel olarak bu özellikleri kullanmak cesaret kırılmadı, harikaydı ve sonunda bulundukları için mutluyuz. Ancak bunların ne zaman ve nerede kullanılacağını bilmek önemlidir. Çok fazla yeniden boyanın olduğu alanlarda kullanmaktan kaçının ve genel olarak aşırı kullanmaktan kaçının.

Canlı Demo

Paul Ireland'ın kesintisiz resim yöntemini kullanarak benzersiz pahalı bir boya işlemini tanımladığı bir demo için aşağıdaki bağlantıyı tıklayın.