Boya profili oluşturmak için sürekli boyama modu Chrome Canary'de kullanıma sunulmuştur. Bu makalede, sayfa boyama süresindeki bir sorunu nasıl tespit edeceğiniz ve bu yeni aracı boyama performansındaki sorunları tespit etmek için nasıl kullanabileceğiniz açıklanmaktadır.
Sayfanızdaki boyama süresini inceleme
Bu nedenle sayfanızın sorunsuz bir şekilde kaymadığını fark ettiniz. Sorunu çözmeye bu şekilde başlarsınız. Bizim ö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ırsınız ve sayfanızı yukarı ve aşağı kaydırırsınız. Ardından, her bir karede neler olduğunu gösteren dikey zaman çizelgelerine bakarsınız.
Zamanın çoğunu boyamak için harcandığını görüyorsanız (60 fps'nin üzerindeki büyük yeşil çubuklar) bunun nedenini daha yakından incelemeniz gerekir. Boyalarınızı incelemek için Web Denetleyicisi'nin (Web Denetleyicisi'nin sağ alt köşesindeki dişli simgesi) Boya dikdörtgenlerini göster ayarını kullanın. Bu şekilde Chrome'un boyadığı bölgeleri görebilirsiniz.
Chrome'un sayfadaki alanları yeniden boyaması için farklı nedenler vardır:
- JavaScript'te DOM düğümleri değiştiği için Chrome, sayfa düzenini yeniden hesaplar.
- Kareye dayalı bir döngü içinde güncellenen animasyonlar oynatılıyor.
- 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 tüm işlemler.
Geliştirici olarak, sayfanızda meydana gelen yeniden boyamalardan haberdar 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örüyorsunuz. Bu, siz kaydırdıkça tüm ekranın yeniden boyandığı anlamına gelir ve bu iyi değildir. Bu özel örnekte, bunun nedeni background-attachment:fixed CSS stilidir. Bu stil, siz ekranı kaydırdıkça sayfanın arka plan resmi, sayfanın içeriği üzerine taşınırken sayfanın arka plan resminin aynı konumda kalmasına neden olur.
Yeniden boyamaların büyük bir alanı kapsadığını ve/veya uzun sürdüğünü belirlerseniz iki seçeneğiniz vardır:
- Resim miktarını azaltmak için sayfa düzenini değiştirmeyi deneyebilirsiniz. Chrome, mümkünse görünür sayfayı yalnızca bir kez boyayıp siz sayfayı aşağı kaydırırken görünmeyen kısımları ekler. Bununla birlikte, Chrome'un belirli alanları yeniden boyaması gereken durumlar da vardır. Örneğin, genellikle aynı konumda kalan gezinme öğeleri için kullanılan CSS kuralı
position:fixed, bu 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ı stiller az, bazılarıysa fazla etkiye sahiptir. Belirli stillerin boyama maliyetlerini tespit etmek, uzun bir çalışma gerektirebilir. Bunu, Öğeler panelinde stilleri açıp kapatarak ve Zaman Çizelgesi kaydındaki farka bakarak yapabilirsiniz. Bu, paneller arasında geçiş yapmak ve çok sayıda kayıt yapmak anlamına gelir. Sürekli boyama modu burada devreye girer.
Sürekli boyama modu
Sürekli boyama modu, sayfada hangi öğelerin maliyetli olduğunu belirlemenize yardımcı olan bir araçtır. Sayfayı sürekli yeniden boyanmış duruma getirir ve ne kadar boyama işlerinin yapıldığını gösteren 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 kullanmak için Chrome Canary kullanmanız gerekir.
Linux sistemlerinde (ve bazı Mac'lerde) Chrome'un birleştirme modunda çalıştığından emin olmanız gerekir. Bu özellik, about:flags içindeki Tüm sayfalarda GPU birleştirme ayarı kullanılarak kalıcı olarak etkinleştirilebilir.
Nasıl Başlanır?
Sürekli boyama modu, Web Denetleyicisi'nin ayarlarındaki (Web Denetleyicisi'nin sağ alt köşesindeki dişli simgesi) Sürekli sayfa 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 ayrıntılı şekilde belirtmek gerekirse:
- Sol tarafta ölçülen son boyama süresi.
- Sağ taraftaki geçerli grafiğin minimum ve maksimum değerleri.
- Alt kısımda son 80 karenin geçmişini gösteren çubuk grafik (grafikteki çizgi, referans noktası olarak 16 ms'yi belirtir).
Boya süresi ölçümleri ekran çözünürlüğüne, pencere boyutuna ve Chrome'un çalıştığı donanıma bağlıdır. Bunların kullanıcılarınız için muhtemelen farklı olabileceğini unutmayın.
İş akışı
Boyama maliyeti yüksek olan öğeleri ve stilleri bulmak için sürekli boyama modunu şu şekilde kullanabilirsiniz:
- Web Denetleyicisi'nin ayarlarını açın ve Sürekli sayfa yeniden boyamayı etkinleştir seçeneğini işaretleyin.
- Öğeler paneline gidin ve ok tuşlarıyla veya sayfadaki öğeleri seçerek DOM ağacında gezinin.
- Bir öğenin görünürlüğünü açıp kapatmak için yeni kullanıma sunulan yardımcı H klavye kısayolunu kullanın.
- Boyama süresi grafiğine bakın ve boyama süresini uzatan bir öğe bulmaya çalışın.
- Yavaşlamaya neden olan stili bulmak için söz konusu öğenin CSS stillerini inceleyin, grafiğe bakarken bunları açıp kapatın.
- Sayfanızın daha iyi performans gösterip göstermediğini kontrol etmek için bu stili değiştirin ve başka bir Zaman Çizelgesi kaydı yapın.
Aşağıdaki animasyonda geçiş stilleri ve bunun boyama süresi üzerindeki etkisi gösterilmektedir:
Bu örnekte, CSS stillerinden box-shadow veya border-radius birini kapatmanın boyama süresini nasıl büyük ölçüde kısalttığı gösterilmektedir. Bir öğede hem box-shadow hem de border-radius kullanılması, yüksek maliyetli boyama işlemlerine neden olur. Chrome bunun için optimizasyon yapamaz. Dolayısıyla, örnekte olduğu gibi çok fazla yeniden boya alan bir öğeniz varsa bu kombinasyondan kaçınmalısınız.
Notlar
Sürekli boyama modu, görülebilir sayfanın tamamını yeniden boyar. Bu durum, web sayfalarına göz atarken genellikle geçerli değildir. Kaydırma işlemi genellikle sadece daha önce görülmemiş 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ştirmelerinizin sayfanızın boyama süreleri üzerinde gerçekten bir etkisi olup olmadığını başka bir Zaman Çizelgesi kaydından kontrol edin.
continuous painting mode kullanırken örneğin, border-radius ve box-shadow CSS stillerinin çok fazla boyama süresi sağladığını keşfedebilirsiniz. Bu özellikleri genel olarak kullanmanız kesinlikle cesaret verici değil.
Harikalar ve sonunda burada oldukları için
mutluyuz. Ancak bunları ne zaman ve nerede kullanacağınızı bilmek önemlidir.
Bu boyaları çok fazla boyanmış yerlerde kullanmaktan kaçının ve genel olarak aşırı kullanmaktan kaçının.
Canlı Demo
Paul Ireland'ın, oldukça pahalı bir boyama işlemini tanımlamak için sürekli resim yaptığı bir demoyu görmek için aşağıdaki düğmeye tıklayın.