Geliştirici Araçları Zaman Çizelgesi paneli, performans optimizasyonuna giden yolda her zaman ilk durak olmuştur. Uygulamanızın etkinliğine ilişkin bu merkezi genel bakış yükleme, komut dosyası yazma, oluşturma ve boyama için nerede zamanın harcandığını analiz etmenize yardımcı olur. Uygulamanızın performansını daha ayrıntılı olarak inceleyebilmeniz için kısa bir süre önce Zaman Çizelgesi'ni daha fazla araçla yeni sürüme geçirdik.
Aşağıdaki özellikleri ekledik:
- entegre JavaScript profil aracı. (Alev grafiği dahil.)
- çerçeve görüntüleyiciyi kullanın.
- Tarayıcının boyama etkinliğini ayrıntılı olarak incelemek için paint profiler (profil boyası) aracını kullanın.
Bu makalede açıklanan Boya yakalama seçeneklerinin kullanılması performans bakımından ek yüke neden olabileceğinden bunları yalnızca istediğiniz zaman etkinleştirin.
Entegre JavaScript Profil Aracı
Profiller panelini ayrıntılı olarak inceledikten sonra JavaScript CPU profil aracı hakkında bilgi sahibisinizdir. Bu araç, JavaScript işlevlerinizde yürütme süresinin nerede harcandığını ölçer. JavaScript profillerini Flame Chart (Fleme Grafiği) ile görüntüleyerek, JavaScript işlemenizi zaman içinde görselleştirebilirsiniz.
Artık JavaScript yürütmenizin bu ayrıntılı dökümünü Zaman Çizelgesi panelinde bulabilirsiniz. JS Profiler yakalama seçeneğini belirleyerek JavaScript çağrı yığınlarını Zaman Çizelgesi'nde diğer tarayıcı etkinlikleriyle birlikte görebilirsiniz. Bu özelliği Zaman Çizelgesi'ne eklemek, hata ayıklama iş akışınızı kolaylaştırmaya yardımcı olur. Ancak daha da önemlisi, JavaScript'inizi bağlam içinde görüntülemenize ve kodunuzun sayfa yükleme süresi ile oluşturmayı etkileyen bölümlerini belirlemenize olanak tanır.
Zaman Çizelgesi paneline JavaScript profil aracına ek olarak bir Flame Grafiği görünümü de entegre ettik. Artık uygulamanızın etkinliğini klasik etkinlik şelalesi veya Flame grafiği olarak görüntüleyebilirsiniz. Flame Chart simgesi, bu iki görünüm arasında geçiş yapmanıza olanak tanır.
Çerçeve Görüntüleyici
Katman birleştirme sanatı, tarayıcının çoğunlukla geliştiricilerden gizlenen bir başka yönüdür. Katmanlar, ölçülü ve özenli kullanıldığında yüksek maliyetli yeniden boya işlemlerinden kaçınmanıza yardımcı olabilir ve performansta büyük artışlar sağlayabilir. Ancak tarayıcının içeriğinizi nasıl birleştireceğini tahmin etmek genellikle pek kolay değildir. Zaman Çizelgesi'nin yeni Boya yakalama seçeneğini kullanarak, bir kaydın her bir karesinde birleştirilmiş katmanları görselleştirebilirsiniz.
Ana İş Parçacığı'nın üzerinde gri bir kare çubuğu seçtiğinizde, Katmanlar paneli, uygulamanızı oluşturan katmanların görsel bir modelini sağlar.
Katman modelini içeriğini keşfetmek için yakınlaştırabilir, döndürebilir ve sürükleyebilirsiniz. Fareyle bir katmanın üzerine geldiğinizde, ilgili katmanın sayfadaki mevcut konumu gösterilir. Bir katmanı sağ tıkladığınızda Öğeler panelinde ilgili düğüme gidebilirsiniz. Bu özellikler, bir katmana neyin yükseltildiğini gösterir. Bir katman seçerseniz Oluşturma Nedenleri etiketli satırda o katmanın neden tanıtıldığını da görebilirsiniz.
Boya Profil Aracı
Son olarak, pahalı boyaların neden olduğu kirlilikleri tespit etmenize yardımcı olmak için boya profiler aracını da ekledik. Bu özellik, Zaman Çizelgesi'ni, Chrome'un boyama etkinlikleri sırasında yaptığı çalışmalarla ilgili daha fazla ayrıntı içerecek şekilde zenginleştirir.
Öncelikle, her boyama etkinliğine karşılık gelen görsel içeriği tanımlamak artık daha kolay. Zaman Çizelgesi'nde yeşil bir boya etkinliği seçtiğinizde, Ayrıntılar bölmesinde boyanmış gerçek piksellerin bir önizlemesi gösterilir.
Gerçekten ayrıntılara inmek istiyorsanız Paint Profiler (Paint Profiler) bölmesine geçin. Bu profil aracı, seçilen boyama için tarayıcının yürüttüğü tam çizim komutlarını gösterir. Bu yerel komutları uygulamanızdaki gerçek içeriğe bağlamanıza yardımcı olması için bir draw* çağrısını sağ tıklayabilir ve Öğeler panelinde doğrudan ilgili düğüme atlayabilirsiniz.
Bölmenin üst kısmındaki mini zaman çizelgesi, boyama sürecini oynatmanıza ve tarayıcının hangi işlemleri pahalıya mal ettiğine dair fikir edinmenizi sağlar. Çizim işlemleri şu şekilde renklerle kodlanmıştır: pembe (şekiller), mavi (bit eşleme), yeşil (metin) ve mor (karma). Çubuk yüksekliği çağrı süresini gösterir. Bu nedenle, uzun çubukları araştırmak, belirli bir boyanın neden maliyetli olduğunu anlamanıza yardımcı olabilir.
Profil ve kâr elde edin!
Performans optimizasyonu söz konusu olduğunda, tarayıcı bilgisi inanılmaz derecede güçlü olabilir. Gelişmiş özelliklere göz atmanızı sağlayan bu Zaman Çizelgesi güncellemeleri, kodunuz ile Chrome'un oluşturma işlemleri arasındaki ilişkiyi netleştirmeye yardımcı olur. Zaman Çizelgesi'ndeki bu yeni seçenekleri deneyin ve Chrome Geliştirici Araçları'nın uygunsuz arama iş akışınızı iyileştirmek için neler yapabileceğini öğrenin.