DevTools başlatma süresini iyileştirme

Maksim Sadym
Maksim Sadym
X GitHub

DevTools artık% 13 daha hızlı açılıyor 🎉 (11,2 saniyeden 10 saniyeye düştü)

Özet: Sonuç, gereksiz bir serileştirme kaldırılarak elde edilir.

Genel Bakış

DevTools başlatılırken V8 JavaScript motoruna bazı çağrılar yapması gerekir.

DevTools'un başlatma işlemi

Chromium'un DevTools komutlarını V8'e göndermek için kullandığı mekanizmaya (ve genel olarak IPC için) mojo denir. Ekip arkadaşlarım Benedikt Meurer ve Sigurd Schneider, başka bir görev üzerinde çalışırken bir verimsizlik keşfetti ve bu mesajların gönderilip alınmasıyla ilgili iki gereksiz adımı kaldırarak süreci iyileştirmek için bir fikir buldu.

mojo mekanizmasının işleyiş şeklini inceleyelim.

mojo mekanizmaları

Mojo mekanizmaları

JS komutunu çalıştıran bir mojo komutu EvaluateScript vardır. arguments dahil olmak üzere tüm JS komutunu eval() olabilecek bir JavaScript kaynak kodu dizesi halinde serileştirir. Tahmin edebileceğiniz gibi bu dizelerin uzunluğu ve maliyeti oldukça artabilir. Komut V8 tarafından alındıktan sonra bu JavaScript kodu dizeleri çalıştırılmadan önce seri dışına çıkarılır. Her ileti için serileştirme ve seri bozma işlemi önemli ölçüde ek yük oluşturur.

Benedikt Meurer, arguments değerinin serileştirilmesinin ve seri dışı bırakılmasının oldukça pahalı olduğunu ve "JS komutunu JS dizesi olarak serileştirme" ile "JS dizesini seri dışı bırakma" adımlarının tamamının gereksiz olduğunu ve atlanabilir olduğunu fark etti.

Teknik ayrıntılar: RenderFrameHostImpl::ExecuteJavaScript

İyileştirmelerimiz

İyileştirilmiş mekanizmalar

JavaScript kaynak kodu dizesi oluşturmak zorunda kalmak yerine nesne adını, çağrılacak yöntemi ve bağımsız değişken listesini doğrudan iletmemize olanak tanıyan başka bir mojo API yöntemi kullanıma sunduk. Bu sayede serileştirme ve seri bozma işlemlerini atlayabilir ve JavaScript kodunu ayrıştırma ihtiyacını ortadan kaldırabiliriz.

Bu optimizasyonu nasıl uyguladığımızla ilgili teknik ayrıntılar için aşağıdaki iki yamayı inceleyin:

  1. CL 2431864: [devtools] Ön uçta ileti dağıtmanın performans yükü azaltıldı
  2. CL 2442012: [devtools] Use ExecuteJavaScriptMethod in DevTools

Etki

Değişikliğin etkinliğini ölçmek için Chromium düzeltmelerini cb971089a058 ve 4f213b39d581 (değişiklikten önce ve sonra) karşılaştıran bazı ölçümler yaptık.

Her iki düzeltme için de aşağıdaki senaryoyu 5 kez çalıştırdık:

  1. chrome://tracing'ü kullanarak izlemeyi kaydetme
  2. DevTools'da DevTools'u açma
  3. Kaydedilen CrRendererMain izlemeyi alın ve V8'e özgü metrikleri karşılaştırın.

Bu denemelere göre, Geliştirici Araçları optimizasyonla yaklaşık% 13 daha hızlı (11,2 saniyeden 10 saniyeye) açılıyor.

Öne çıkanlar, CPU süreleri

Yöntem adı Optimize edilmedi (milisaniye) Optimize edilmiş (milisaniye) Farklılıklar (ms) Hız artışı (%)
Toplam 11.213,19 9.953,99 -1.259,20 %12,65
v8.run 499,67 3,61 -496,06 %12,65
V8.Execute 1.654,87 1.349,61 -305,25 %3,07
v8.callFunction 1.171,84 1.339,77 167,94 -%1,69
v8.compile 133,93 3,56 -130,37 %1,31

Geliştirici Araçları'nın yüklenmesi için harcanan CPU süresi (ms)

Tam izleme metrikleri karşılaştırma tablosu

Sonuç olarak, DevTools açılır ve daha az CPU kullanımıyla daha hızlı çalışır. 🎉

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.