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.
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ı
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?
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:
- CL 2431864: [devtools] Kullanıcı arabiriminde ileti gönderme işleminin performans ek yükünü azaltma
- 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:
- İzlemeyi
chrome://tracing
kullanarak kaydet - DevTools-on-DevTools'u açın.
- 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% |
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.
- @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.