Giriş
Tarayıcıların işleyiş şekli gibi konuları takip eden biriyseniz son zamanlarda Chrome'un GPU hızlandırmalı oluşturucu/bileşik işlemini ayrıntılı olarak açıklayan muhteşem makaleler yayınlandığını zaten biliyorsunuzdur. Öncelikle Chrome'da Hızlandırılmış Oluşturma: Katman Modeli, Chrome'un sayfalarını çizmek için katman kavramını nasıl kullandığına dair harika bir giriş niteliğindedir. Daha ayrıntılı bir inceleme için Chrome'da GPU Hızlandırmalı Birleştirme, Chrome'un sayfanızı oluşturmak için GPU ile birlikte bu katmanları nasıl kullandığını ele alır.
Felsefi soru
3D amaçlı yazılım rasterleştiricileri yazmak için çok zaman harcadıktan sonra, sayfanızı çizerken bazı CSS özelliklerinin farklı performans göstermesi gerektiği anlaşıldı. Örneğin, küçük bir resmi ekrana rasterleştirmek, rastgele bir şekle gölge çizmekten tamamen farklı bir algoritmik işlemdir. Bu nedenle soru şu hale geldi: Farklı CSS özellikleri, sayfanızın oluşturma ağırlığını nasıl etkiler?
Amacım, büyük bir CSS özellikleri/değerleri grubunu boyama sürelerine göre kategorize etmekti. Böylece, hangi CSS özelliklerinin diğerlerinden daha performanslı olduğunu anlayabilecektik. Bunu yapmak için CSS boyama sürelerine sayısal görünürlük eklemeye çalışan, derme çatma bir otomasyon yazdım. Bu otomasyon şu şekilde çalışıyordu:
- Her biri tek bir DOM öğesi ve buna eklenmiş CSS özelliklerinin bazı permütasyonlarını içeren bir dizi bağımsız HTML sayfası oluşturun.
- Her sayfa için aşağıdaki işlemleri yapacak bir otomasyon komut dosyası çalıştırın:
- Chrome'u Başlat
- Sayfa yükleme
- Sayfa için Skia resmi oluşturun.
- Zamanlamaları elde etmek için çekilen her Skia resmini Skia Benchmark üzerinden çalıştırın.
- Tüm zamanlamaları dökün ve sayılara hayran kalın. (Bu kısım önemli…)
Bu kurulumla, her sayfanın CSS özelliklerinin ve değerlerinin benzersiz bir permütasyonunu içerdiği bir HTML sayfaları paketi oluştururuz. Örneğin, iki HTML dosyası şöyledir:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Bir de daha karmaşık bir örnek verelim.
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Aşağıda, yalnızca dairesel renk geçişi değerini değiştirdiğimiz son örneğin bir varyantı verilmiştir:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Ardından her sayfa, Chrome'un yeni bir örneğine yüklenir (sayfa yeniden yüklemelerindeki eski durumların zamanlamaları etkilemediğinden emin olmak için) ve sayfayı boyamak için hangi Skia komutlarının kullanıldığını değerlendirmek üzere bir Skia Resmi (*.SKP) alınır. Her HTML dosyası için SKP dosyaları oluşturulduktan sonra, *.SKP dosyalarını Skia Benchmark uygulaması (Skia kaynak kodundan oluşturulur) üzerinden göndermek için başka bir toplu işlem çalıştırırız. Bu uygulama, söz konusu sayfanın oluşturulması için gereken ortalama süreyi gösterir.
Verileri değerlendirme
Bu sayede, bir CSS özellikleri grubunun boyanmasının ne kadar sürdüğünü kabaca hesaplayabiliyoruz. Daha doğrusu, CSS özelliklerini boyama performanslarına göre sıralamaya başlayabiliriz. Aşağıda, bu süreçteki tüm zamanlama verilerini gösteren, Chrome 27 beta ile alınmış büyük bir grafik yer almaktadır. Chrome zaman içinde daha da hızlandıkça tüm verilerin değişebileceğini unutmayın.
Her dikey çubuk, tek bir CSS özellikleri kombinasyonuna sahip bir sayfanın boyama süresini temsil eder (100 kat büyütülmüştür; bu grafiğin gerçek ölçek değeri 0,1,56 ms'dir). Çok sayıda güzel çizgi var ancak bu biçimde pek kullanışlı değil. Yararlı trendleri bulmak için biraz veri madenciliği yapmamız gerekiyor.
Öncelikle, bazı CSS özelliklerinin oluşturulmasının diğerlerine göre daha pahalı olduğuna dair kanıtlar bulduk. Örneğin, bir DOM öğesine gölge çizmek, spline'lar ve diğer karmaşık işlemlerle çok aşamalı bir işlem gerektirir. Opaklık ise daha kolay oluşturulabilir.
İkinci olarak ve daha da ilginç olanı, CSS özelliklerinin kombinasyonları, parçalarının toplamından daha uzun bir boyama süresine sahip olabilir. Dışarıdan bakıldığında bu biraz tuhaf görünebilir.A+B'nin 2,2C değil, C'ye eşit olmasını bekleriz. Örneğin, box-shadow ve border-radius-stroke ekleniyor:
Bu konuda asıl ilginç olan, yalnızca box-shadow özelliğinin kendisi değil, bu belirli değer permütasyonudur. Örneğin, aşağıda değer varyasyonlarıyla birlikte box-shadow : 50% ve border-radius gruplandırması gösterilmektedir.
Verilere bakıldığında bu durumun bir süre devam ettiği görülüyor. Çok sayıda farklı ve tuhaf kombinasyon var ve test paketim bunların neredeyse hiçbirine değinmiyor. İlginç sonuçlar verebilecek tonlarca test ve kombinasyon var.
Sayfanızın oluşturma ağırlığını bulma
Sayfanızdaki her öğenin oluşturma süresini izleme olanağına sahip olan geliştiriciler, sayfa oluşturma ağırlığını ve bunun sitenizin yanıt verme hızını nasıl etkilediğini değerlendirmeye başlayabilir. Başlamak için birkaç ipucu:
- Hangi CSS özelliklerinin size maliyet getirdiğini anlamak için Chrome Geliştirici Araçları'nda Chrome'un Sürekli Boyama modunu kullanın.
- Performans sorunlarını yakalamak için CSS incelemelerini mevcut kod inceleme sürecinize dahil edin. CSS'nizde, gradyanlar ve gölgeler gibi daha pahalı olduğu bilinen öğeleri kullandığınız yerleri arayın. Kendinize şu soruyu sorun: Bunlara burada gerçekten ihtiyacım var mı?
- Şüpheye düştüğünüzde her zaman daha iyi performans gösteren seçeneği tercih edin. Kullanıcılarınız sütunlarınızdaki dolgu genişliğini hatırlamayabilir ancak sitenizi ziyaret etmenin nasıl bir his olduğunu hatırlayacaktır.
Son düşünceler
Bu denemeyle ilgili en ilginç noktalardan biri, zamanlamaların her Chrome sürümüyle birlikte değişmeye devam etmesidir (umarız daha hızlı olur ;). Tarayıcı yazılımı, sürekli değişen bir yüzey alanıdır. Bugün yavaş olan yarın hızlı olabilir. Zaten border-radius:5 içeren bir öğeye box-shadow: 1px 2px 3px 4px eklememek için bu makaleden yararlanabilirsiniz. Ancak daha önemli olan, CSS özelliklerinin sayfanızın boyama sürelerini doğrudan etkilemesidir.