DevTools başlatma süresini iyileştirme

Maksim Sadym
Maksim Sadym

DevTools başlangıcı artık yaklaşık% 13 daha hızlı 🎉 (11,2-10 saniye arasında)

Özet: Sonuç, gereksiz serileştirmenin kaldırılmasıyla elde edilir.

Genel bakış

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

Geliştirici Araçları başlatma işlemi

Chromium'un, Geliştirici Araçları komutlarını V8'e (ve genel olarak IPC için) göndermek için kullandığı mekanizmaya mojo adı verilir. Ekip arkadaşlarım Benedikt Meurer ve Sigurd Schneider, başka bir görev üzerinde çalışırken verimsiz bir durum keşfettiler ve bu iletilerin gönderilmesi ve alınmasıyla ilgili iki gereksiz adımı kaldırarak süreci iyileştirmeye yönelik bir fikir geliştirdiler.

mojo mekanizmasının işleyiş şeklini ayrıntılı olarak inceleyelim.

mojo mekanizmaları

Mojo mekanizmaları

JS komutunu çalıştıran bir mojo komutu EvaluateScript vardır. arguments de dahil olmak üzere tüm JS komutunu, eval() olabilecek JavaScript kaynak kodu dizesinde seriler. Tahmin edebileceğiniz gibi bu dizeler oldukça uzun ve pahalı olabilir. Komut V8 tarafından alındıktan sonra, bu JavaScript kodu dizeleri çalıştırılmadan önce seri durumdan çıkarılır. Her bir iletiyi serileştirme ve serileştirme işlemi önemli ölçüde ek yük oluşturur.

Benedikt Meurer, arguments için serileştirme ve seri durumdan çıkarma işlemlerinin oldukça maliyetli olduğunu ve "JS komutunu JS dizesine serile" ile "JS dizesini seri haline getir" adımlarının tamamının gereksiz olduğunu ve atlanabileceğini fark etti.

Teknik ayrıntılar: RenderFrameHostImpl::ExecuteJavaScript

Nasıl iyileştirme yaptık?

İyileştirilmiş mekanizmalar

JavaScript kaynak kodu dizesini oluşturmak yerine, nesne adını, çağrılacak yöntemi ve bağımsız değişkenler listesini doğrudan iletmemize olanak tanıyan başka bir mojo API yöntemini kullanıma sunduk. Bu yöntem, serileştirme ve serileştirme işlemini atlamamızı sağlar ve JavaScript kodunu ayrıştırma gereksinimini ortadan kaldırır.

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

  1. CL 2431864: [devtools] Kullanıcı arabiriminde ileti gönderme işleminin performans ek yükünü azaltma
  2. CL 2442012: [devtools] Geliştirici Araçları'nda ExecuteJavaScriptMethod kullanma

Etki

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

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

  1. İzlemeyi chrome://tracing kullanarak kaydet
  2. DevTools-on-DevTools'u açın.
  3. Kaydedilen CrRendererMain izini alın ve V8'e özgü metrikleri karşılaştırın.

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

Öne çıkanlar, CPU süreleri

Yöntem adı Optimize edilmedi (ms) Optimize edilmiş (ms) Farklar (ms) Hız iyileştirmesi (%)
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ı yükleme CPU süresi (ms)

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

Bunun sonucunda 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ı ile Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz.

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden bize öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.Daha fazla
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları YouTube videoları bölümündeki yenilikler veya Geliştirici Araçları İpuçları YouTube videoları bölümlerimize yorum yapın.