Boya profilleme için sürekli boyama modu artık Chrome Canary'da kullanılabilir. Bu makalede, sayfa boyama süresindeki bir sorunu nasıl tespit edeceğ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 kaymadığını fark ettiniz. Sorunu çözmeye bu şekilde başlarsınız. Örneğimizde Dan Cederholm tarafından yazılan Things We Left On The Moon (Ay'da Bıraktığımız Şeyler) adlı demo sayfasını kullanacağız.
Web Denetleyici'yi açın, zaman çizelgesi kaydı başlatın ve sayfanızı aşağı yukarı kaydırın. Ardından, her karede neler olduğunu gösteren dikey zaman çizelgelerine bakarsınız.
Çoğu zamanın boyama işleminde harcandığını (60 fps'nin üzerindeki büyük yeşil çubuklar) görüyorsanız bunun nedenini daha ayrıntılı incelemeniz gerekir. Boyalarınızı incelemek için Web Denetleyici'nin Boya dikdörtgenlerini göster ayarını (Web Denetleyici'nin sağ alt köşesindeki dişli simgesi) kullanın. Bu işlem, Chrome'un boyadığı bölgeleri gösterir.
Chrome'un sayfanın bazı alanlarını yeniden boyamasının farklı nedenleri vardır:
- JavaScript'te DOM düğümleri değiştirilir. Bu da Chrome'un sayfanın düzenini yeniden hesaplamasına neden olur.
- Kare tabanlı bir döngüde güncellenen animasyonlar oynatılır.
- Fareyle üzerine gelme gibi kullanıcı etkileşimleri, belirli öğelerde stil değişikliklerine neden olur.
- Sayfa düzeninin değişmesine neden olan diğer işlemler.
Geliştirici olarak, sayfanızda gerçekleşen yeniden boyama işlemlerinden haberdar olmanız gerekir.
Boya dikdörtgenlerine bakmak bunun için mükemmel bir yöntemdir. Yukarıdaki örnek ekran görüntüsünde ekranın tamamının büyük bir boya dikdörtgeniyle kaplı olduğunu görebilirsiniz. Bu, siz kaydırırken ekranın tamamının yeniden boyanacağı anlamına gelir. Bu da iyi bir durum değildir. Bu durumda, sayfanın arka plan resminin aynı konumda kalmasına, sayfanın içeriği siz kaydırırken bunun üzerine taşınmasına neden olan CSS stili background-attachment:fixed'ten kaynaklanmaktadır.
Yeniden boyama işlemlerinin büyük bir alanı kapsadığını ve/veya uzun sürdüğünü tespit ederseniz iki seçeneğiniz vardır:
- Boyama 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 boyar ve siz aşağı kaydırdığınızda görünmeyen bölümleri ekler. Ancak Chrome'un belirli alanları yeniden boyaması gereken durumlar vardır. Örneğin, genellikle aynı konumda kalan gezinme öğeleri için kullanılan CSS kuralı
position:fixedbu yeniden boyamalara neden olabilir. - Sayfa düzeninizi korumak istiyorsanız yeniden boyanacak alanların boyama maliyetini azaltmayı deneyebilirsiniz. Her CSS stilinin boyama maliyeti aynı değildir. Bazılarının etkisi az, bazılarının etkisi çoktur. Belirli tarzların resim maliyetlerini belirlemek çok zahmetli bir iş olabilir. Bunu, Öğeler panelinde stilleri değiştirerek ve zaman çizelgesi kaydındaki farka bakarak yapabilirsiniz. Bu işlem için paneller arasında geçiş yapmanız ve çok sayıda kayıt yapmanız gerekir. 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ı her zaman yeniden boyama durumuna geçirir ve ne kadar boyama çalışması yapıldığını gösteren bir sayaç gösterir. Ardından, sayacı izleyerek yavaş olan öğeleri gizleyebilir ve stilleri değiştirebilirsiniz.
Kurulum
Sürekli boyama modunu kullanmak için Chrome Canary'ı kullanmanız gerekir.
Linux sistemlerinde (ve bazı Mac'lerde) Chrome'un, oluşturma modunda çalıştığından emin olmanız gerekir. Bu özellik, about:flags'deki Tüm sayfalarda GPU oluşturma ayarı kullanılarak kalıcı olarak etkinleştirilebilir.
Başlangıç
Sürekli boyama modu, Web Denetleyici'nin ayarlarındaki (Web Denetleyici'nin sağ alt köşesindeki dişli simgesi) Sürekli sayfayı yeniden boyamayı etkinleştir onay kutusu aracılığıyla etkinleştirilebilir.
Sağ üst köşedeki küçük ekranda, ölçülen boyama süreleri milisaniye cinsinden gösterilir. Daha açık belirtmek gerekirse:
- Sol tarafta, son ölçülen boyama zamanı.
- Sağdaki mevcut grafiğin minimum ve maksimum değerleri.
- Alt tarafta, son 80 karenin geçmişini gösteren bir ç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 çalıştığı donanıma bağlıdır. Bu bilgilerin kullanıcılarınız için farklı olabileceğini unutmayın.
İş akışı
Çok fazla boyama maliyeti ekleyen öğeleri ve stilleri bulmak için sürekli boyama modunu şu şekilde kullanabilirsiniz:
- Web İnceleyici'nin ayarlarını açıp Sürekli sayfayı yeniden boyama özelliğini etkinleştir'i işaretleyin.
- Öğeler paneline gidin ve ok tuşlarını kullanarak veya sayfadaki öğeleri seçerek DOM ağacında gezinin.
- Bir öğenin görünürlüğünü değiştirmek için yeni kullanıma sunulan yardımcı H klavye kısayolunu kullanın.
- Boyama süresi grafiğine bakın ve çok fazla boyama süresi ekleyen bir öğe olup olmadığını tespit etmeye çalışın.
- Yavaşlamaya neden olan stili bulmak için ilgili öğenin CSS stillerini inceleyin ve grafiğe bakarken bunları açıp kapatın.
- Bu stili değiştirin ve sayfanızı daha iyi performans gösterip göstermediğini kontrol etmek için başka bir zaman çizelgesi kaydı yapın.
Aşağıdaki animasyonda, stilleri değiştirme ve bunun boyama süresine etkisi gösterilmektedir:
Bu örnekte, CSS stillerinden box-shadow veya border-radius'ın devre dışı bırakılmasının boyama süresini büyük oranda nasıl azalttığı gösterilmektedir. Chrome bu durum için optimizasyon yapamadığından, bir öğede hem box-shadow hem de border-radius kullanılması çok pahalı boyama işlemlerine neden olur. Bu nedenle, örnekte gösterildiği gibi çok fazla yeniden boyama işlemi yapılan bir öğeniz varsa bu kombinasyondan kaçınmalısınız.
Notlar
Sürekli boyama modu, görünür sayfanın tamamını yeniden boyar. Bu durum genellikle bir web sayfasına göz atarken geçerli değildir. Kaydırma işlemi genellikle yalnızca daha önce görünmeyen kısımları boyar. Sayfadaki diğer değişiklikler için ise yalnızca mümkün olan en küçük alan yeniden boyanır. Bu nedenle, stil iyileştirmelerinizin sayfanızı oluşturma sürelerini gerçekten etkileyip etkilemediğini başka bir zaman çizelgesi kaydıyla kontrol edin.
continuous painting mode'ü kullanırken, örneğin border-radius ve box-shadow CSS stillerinin çok fazla boyama süresi eklediğini fark edebilirsiniz. Bu özellikleri kullanmanızı kesinlikle öneriyoruz. Bu özellikler harika ve nihayet kullanıma sunulduğuna sevindik. Ancak bu araçları ne zaman ve nerede kullanacağınızı bilmeniz önemlidir.
Çok fazla yeniden boyama yapılan alanlarda ve genel olarak fazla kullanmaktan kaçının.
Canlı Demo
Paul Irish'ın benzersiz şekilde pahalı bir boya işlemini belirlemek için sürekli boyama işlemini kullandığı bir demo için aşağıyı tıklayın.