Giriş
Tarayıcıların çalışma şekli gibi konuları takip eden bir kişiyseniz, son zamanlarda Chrome'un GPU hızlandırılmış oluşturucusunu/birleşik işlemini ayrıntılı şekilde açıklayan harika makaleler yayınlandığını zaten biliyorsunuzdur. İlk olarak Chrome'da Hızlandırılmış Oluşturma: Katman Modeli, Chrome'un sayfalarını çizmek için katman kavramını nasıl kullandığına ilişkin harika bir giriş niteliğindedir. Daha ayrıntılı bilgi için Chrome'da GPU Hızlandırılmış Birleştirme, Chrome'un sayfanızı oluşturmak için GPU'nun yanı sıra bu katmanları nasıl kullandığını anlatır.
Felsefi soru
3D amacıyla yazılım kafesleştiriciler yazmak için epey zaman harcadıktan sonra, bazı CSS özelliklerinin, sayfanızı çizerken çeşitli performanslara sahip olması gerektiğini fark ettim. Örneğin, küçük bir resmin ekranda pikselleştirilmesi, rastgele bir şekle gölge çizen tamamen farklı bir algoritmik işlemdir. Bu durumda soru şu şekildedir: Farklı CSS özellikleri, sayfanızın oluşturma ağırlığını nasıl etkiler?
Amacım, ne tür CSS mülklerinin diğerlerinden daha iyi performans gösterdiğini anlamak için büyük bir CSS mülkü/değeri grubunu boyama sürelerine göre kategorilere ayırmaktı. Bu amaçla, CSS boya sürelerine sayısal görünürlük eklemek amacıyla koli bandı ve sakızla bazı otomasyon süreçleri yazdım. Bu süreç şu şekilde çalıştı:
- Her biri tek bir DOM öğesi ve buna bağlı CSS özelliklerinin bazı permütasyonları olan bağımsız HTML sayfalarından oluşan bir paket oluşturun.
- Her sayfa için şunları yapacak bir otomasyon komut dosyası çalıştırın:
- Chrome'u Başlat
- Sayfa yükleme
- Sayfa için bir Kayak Resmi oluşturun
- Skia Karşılaştırması ile çekilen her bir Skia Resmini çalıştırarak zamanlamaları öğrenin
- Tüm zamanlamaları bir kenara bırakın ve sayılara hayretle bakın. (Bu kısım önemlidir...)
Bu kurulumla, her sayfanın CSS özellikleri ve değerlerinin benzersiz bir permütasyonunu içerdiği bir HTML sayfası paketi oluştururuz; örneğin, aşağıda iki html dosyası görebilirsiniz:
<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>
Diğer bir olasılık ise
<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, son örneğin yalnızca dairesel renk geçişi değerini değiştirdiğimiz bir varyantı olarak:
<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>
Daha sonra her sayfa, Chrome'un yeni bir örneğine yüklenir (zamanlamaların, sayfaların yeniden yüklenmesinde eski durumlardan herhangi bir şekilde etkilenmesini önlemek için) ve sayfayı boyamak için hangi Skia komutlarının kullanıldığına karar vermek üzere bir Skia Resmi (*.SKP) alınır. Her bir HTML dosyası için SKP dosyaları oluşturulduktan sonra *.SKP dosyalarını Skia Benchmark uygulaması (Skia kaynak kodundan oluşturulan) üzerinden aktarmak için başka bir grup çalıştırırız. Bu işlem, ilgili sayfanın oluşturulması için gereken ortalama sürenin dökümünü verir.
Verileri değerlendirme
Buradan yola çıkarak, bir CSS özelliği paketinin boyama için ne kadar gerekli olduğunu kabaca gösteren bir veriye sahibiz. Bunun yerine, CSS özelliklerini boyama performanslarına göre gruplandırmaya başlayabiliriz. Burada, Chrome 27 beta sürümüyle alınan ve bu işleme ilişkin tüm zamanlama verilerinin tamamını gösteren büyük bir grafiği bulabilirsiniz. Chrome zaman içinde daha hızlı hale geldiğinden tüm verilerin değişebileceğini unutmayın.
Her dikey çubuk, tek bir CSS özelliği kombinasyonuna sahip sayfanın boyanma süresini gösterir (100x ile büyütülür; bu grafiğin gerçek ölçek değeri 0,1,56 ms'dir). Çok sayıda güzel satır var ancak bu biçimdeki kullanım bir şekilde yararsız; kullanışlı trendlere ulaşmak için veri madenciliği yapmamız gerekiyor.
Öncelikle bazı CSS özelliklerinin oluşturulmasının diğerlerinden sadece daha pahalı olduğuna dair kanıt buluyoruz. Örneğin, bir DOM öğesinde gölge çizme işlemi, oluşturulması daha kolay olması gereken opaklığa karşılık splines ve diğer türlerde rahatsız edici şeylerle bir çoklu geçiş işlemi gerektirir.
İkinci ve daha ilgi çekici bir nokta ise CSS Özellikleri kombinasyonlarının boyama sürelerinin, parçalarının toplamından daha uzun olabileceğidir. Bir gözlemci açısından bu biraz tuhaf.2,2C'nin değil, A+B = C'nin olması beklenir. Örneğin box-shadow ve border-radius-stroke eklenerek :
Bununla ilgili asıl ilginç olan, yalnızca box-shadow özelliğinin kendisi değil, belirli değer permütasyonudur. Örneğin, aşağıda değer varyasyonlarına sahip box-shadow : 50% ve border-radius gruplandırması gösterilmektedir.
Veriler incelendiğinde bu durum biraz da devam ediyor. Çok sayıda tuhaf kombinasyon var ve test paketim bunların hepsine neredeyse hiç dokunmadı. İlginç sonuçlar sağlayabilecek tonlarca test ve kombinasyon var
Sayfanızın oluşturulma ağırlığını bulma
Sayfanızdaki her bir öğenin oluşturma sürelerini takip etme olanağına sahip olan geliştiriciler, sayfa oluşturma ağırlıklarını ve bunun sitenizin duyarlılığını nasıl etkilediğini değerlendirmeye başlayabilir. Başlamak için birkaç ipucunu burada bulabilirsiniz
- Hangi CSS özelliklerinin size maliyetli olduğunu anlamak için Chrome Geliştirici Araçları'nda Chrome'un Sürekli Boyama modunu kullanın.
- Performans sorunlarını tespit etmek için CSS incelemelerini mevcut kod inceleme işleminize dahil edin CSS'de, renk geçişleri ve gölgeler gibi daha pahalı olduğu bilinen öğeleri kullandığınız yerleri bulun. Kendinize sorun: Bunlara gerçekten ihtiyacım var mı?
- Şüpheye düştüğünüzde, her zaman daha iyi performanstan yana olun. Kullanıcılarınız sütunlarınızdaki dolgu genişliğini hatırlamasa da sitenizi ziyaret etmenin nasıl bir his olduğunu hatırlar.
Son Düşünceler
Bu denemenin en ilginç yanlarından biri, zamanlamaların her Chrome sürümüyle değişmeye devam edecek olmasıdır (umarım 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. border-radius:5 içeren bir öğeye box-shadow: 1px 2px 3px 4px öğesini eklememek için bu makaleden çıkarılabilir. Ancak CSS özelliklerinin sayfa boyama sürelerinizi doğrudan etkilemesi daha değerli olacaktır.