DevTools Zaman Çizelgesi: Artık hikayenin tamamını sunuyoruz

Heather Mahan

Geliştirici Araçları Zaman Çizelgesi paneli her zaman performans optimizasyonuna giden en iyi ilk durak olmuştur. Uygulamanızın etkinliğine dair bu merkezi genel bakış sayesinde yükleme, komut dosyası oluşturma, oluşturma ve boyama için hangi aşamada zaman harcandığını analiz edebilirsiniz. Uygulamanızın performansını daha ayrıntılı şekilde inceleyebilmeniz için yakın zamanda Zaman Çizelgesi'ni daha fazla araçla yeni sürüme geçirdik.

Şu özellikleri ekledik:

Bu makalede açıklanan Paint yakalama seçeneklerini kullandığınızda bir miktar performans yüküne neden olacağını unutmayın. Bu nedenle, bunları yalnızca istediğiniz zaman etkinleştirin.

Entegre JavaScript Profil Aracı

Profiller panelini daha önce incelediyseniz muhtemelen 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 ile görüntüleyerek, JavaScript işlemenizin zaman içindeki değişimini görselleştirebilirsiniz.

Artık JavaScript yürütmenizin bu ayrıntılı dökümünü Zaman Çizelgesi panelinde görebilirsiniz. JS Profiler yakalama seçeneğini belirleyerek JavaScript çağrı yığınlarınızı 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.

JavaScript profil aracına ek olarak, Zaman Çizelgesi paneline Aflame Grafiği görünümünü de entegre ettik. Artık uygulamanızın etkinliğini klasik etkinlik şelalesi veya Alev Grafiği olarak görüntüleyebilirsiniz. Flame Chart simgesi, bu iki görünüm arasında geçiş yapmanızı sağlar.

Alev simgesi.
Zaman Çizelgesi'ndeki çağrı yığınlarını incelemek için JS Profil Aracı yakalama seçeneği ve Alev Grafiği görünümünü kullanma.
Zaman Çizelgesi'ndeki çağrı yığınlarını incelemek için JS Profil Aracı yakalama seçeneği ve Alev Grafiği görünümünü kullanma.

Çerçeve Görüntüleyici

Tarayıcının, geliştiricilerden çoğunlukla gizlenen başka bir özelliği de katman birleştirme sanatıdır. Katmanlar tutumlu ve dikkatli bir şekilde kullanıldığında yüksek maliyetli yeniden boyamalardan kaçınabilir ve büyük performans artışları sağlayabilir. Ancak tarayıcının içeriğinizi nasıl birleştireceğini tahmin etmek çoğu zaman kolay değildir. Zaman Çizelgesi'nin yeni Paint yakalama seçeneğini kullanarak kaydın her karesinde birleştirilmiş katmanları görselleştirebilirsiniz.

Ana İş Parçacığı'nın üzerinde gri bir çerçeve çubuğu seçtiğinizde, Katmanlar paneli, uygulamanızı oluşturan katmanların görsel bir modelini sağlar.

İçeriğini incelemek için katmanlar modelini yakınlaştırabilir, döndürebilir ve sürükleyebilirsiniz. Fareyle bir katmanın üzerine gelindiğinde, katmanın sayfadaki mevcut konumu gösterilir. Bir katmanı sağ tıklayarak Öğeler panelinde ilgili düğüme gidebilirsiniz. Bu özelliklerde bir katmana yükseltilen öğeler gösterilmektedir. Bir katman seçerseniz, bu katmanın yükseltilmesinin nedenini Birleştirme Nedenleri etiketli satırda da görebilirsiniz.

Tarayıcının birleştirme nedenlerini ortaya çıkarmak için Codrops'un Dağıtılmış Polaroidler Galerisi'nden bir katmanın incelenmesi.
Tarayıcının birleştirme nedenlerini görmek için Codrops'un Dağıtılmış Polaroidler Galerisi'nden bir katmanı inceleme.

Boyama Profil Aracı

Son olarak, pahalı boyaların neden olduğu olumsuzluğu belirlemenize yardımcı olmak için boya profili aracını ekledik. Bu özellik, Chrome'un boyama etkinlikleri sırasında yaptığı çalışmalar hakkında daha fazla ayrıntı sağlayarak Zaman Çizelgesi'ni zenginleştirir.

Öncelikle, her boya etkinliğine karşılık gelen görsel içeriği tanımlamak artık daha kolay. Zaman Çizelgesi'nde yeşil boyama etkinliği seçtiğinizde Ayrıntılar bölmesinde, boyanmış gerçek piksellerin önizlemesi gösterilir.

Tarayıcının Boya yakalama seçeneğini kullanarak boyadığı pikselleri önizleme.
Paint yakalama seçeneğini kullanarak tarayıcının boyadığı pikselleri önizleme.

Ayrıntılara inmek istiyorsanız Paint Profiler bölmesine geçin. Bu profil aracı, seçilen boya için tarayıcının çalıştırdığı çizim komutlarını tam olarak gösterir. Bu yerel komutları uygulamanızdaki asıl içeriğe bağlamanıza yardımcı olması için bir draw* çağrısını sağ tıklayıp doğrudan Öğeler panelinde ilgili düğüme atlayabilirsiniz.

Paint Profiler'ı kullanarak yerel tarayıcıyı ilgili yapan DOM öğelerine çağrı yapın.
Paint Profiler'ı kullanarak DOM öğelerine yerel tarayıcı draw çağrılarıyla ilgili işlemler.

Bölmenin üst kısmındaki kısa zaman çizelgesi, boyama işlemini yeniden oynatabilmenizi ve hangi işlemlerin tarayıcı için pahalı olduğunu anlamanıza olanak sağlar. Çizim işlemleri için renkler şu şekilde kodlanmıştır: pembe (şekiller), mavi (bit eşlem), yeşil (metin) ve mor (çeşitli). Çubuğun yüksekliği çağrı süresini gösterir. Bu nedenle, uzun çubukları incelemek belirli bir boyanın neden maliyetli olduğunu anlamanıza yardımcı olabilir.

Profil ve kâr!

Performans optimizasyonu söz konusu olduğunda, tarayıcı bilgisi son derece güçlü olabilir. Zaman Çizelgesi güncellemeleri, ayrıntılı bilgi sağlayarak 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, olumsuzluk avı iş akışınızı geliştirmek için neler yapabileceğini görün.