Verbetering van de opstarttijd van DevTools,Verbetering van de opstarttijd van DevTools

Maksim Sadim
Maksim Sadym

Het opstarten van DevTools is nu ~13% sneller 🎉 (van 11,2 seconden naar 10 seconden)

TL;DR; Het resultaat wordt bereikt door een redundante serialisatie te verwijderen.

Overzicht

Terwijl DevTools aan het opstarten is, moet het enkele oproepen doen naar de V8 JavaScript-engine .

Opstartproces van DevTools

Het mechanisme dat Chromium gebruikt om DevTools-opdrachten naar V8 (en voor IPC in het algemeen) te sturen, wordt mojo genoemd. Mijn teamgenoten Benedikt Meurer en Sigurd Schneider ontdekten een inefficiëntie tijdens het werken aan een andere taak en kwamen met een idee om het proces te verbeteren door twee overbodige stappen te verwijderen in de manier waarop deze berichten worden verzonden en ontvangen.

Laten we eens kijken hoe het mojo -mechanisme werkt!

De mojo mechanismen

De mojo-mechanismen

Er is een mojo-opdracht EvaluateScript die de JS-opdracht uitvoert. Het serialiseert de hele JS-opdracht inclusief de arguments in een reeks JavaScript-broncode die eval() kan zijn. Zoals je je misschien kunt voorstellen, kunnen deze snaren behoorlijk lang en duur worden. Nadat de opdracht door V8 is ontvangen, worden deze reeksen JavaScript-code gedeserialiseerd voordat ze worden uitgevoerd. Dit proces van serialiseren en deserialiseren voor elk afzonderlijk bericht zorgt voor aanzienlijke overhead.

Benedikt Meurer realiseerde zich dat serialisatie en deserialisatie van de arguments behoorlijk duur is, en dat de hele stappen "Serialize JS command to JS string" en "Deserialize JS string" overbodig zijn en kunnen worden overgeslagen.

Technische details: RenderFrameHostImpl::ExecuteJavaScript

Hoe we verbeterden

Verbeterde mechanismen

We hebben een andere mojo API-methode geïntroduceerd waarmee we de objectnaam, de aan te roepen methode en de lijst met argumenten rechtstreeks kunnen doorgeven, in plaats van dat we de reeks JavaScript-broncode moeten maken. Hierdoor kunnen we serialisatie en deserialisatie overslaan en is het niet meer nodig om de JavaScript-code te parseren.

Raadpleeg deze twee patches voor technische details over hoe we deze optimalisatie hebben geïmplementeerd:

  1. CL 2431864: [devtools] Verminder de prestatieoverhead van berichtverzending in de front-end
  2. CL 2442012: [devtools] Gebruik ExecuteJavaScriptMethod in DevTools

Invloed

Om de effectiviteit van de wijziging te meten, hebben we enkele metingen uitgevoerd waarbij Chromium-revisies cb971089a058 en 4f213b39d581 werden vergeleken (voor en na de wijziging).

Voor beide revisies hebben we het volgende scenario vijf keer uitgevoerd:

  1. Registreer tracering met chrome://tracing
  2. Open DevTools-op-DevTools
  3. Haal de opgenomen CrRendererMain trace op en vergelijk de V8-specifieke statistieken.

Op basis van deze experimenten opent DevTools ~13% sneller (van 11,2 seconden naar 10 seconden) met de optimalisatie.

Hoogtepunten, CPU-duur

Naam van methode Niet geoptimaliseerd (ms) Geoptimaliseerd (ms) Verschillen (ms) Snelheidsverbetering (%)
Totaal 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3.61 -496,06 12,65%
V8.Uitvoeren 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1.171,84 1.339,77 167,94 -1,69%
v8.compileren 133,93 3.56 -130,37 1,31%

DevTools laadt CPU-tijd (ms)

Volledige vergelijkingstabel voor traceringsstatistieken

Als gevolg hiervan wordt DevTools sneller geopend en werkt het met minder CPU-gebruik . 🎉

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .
,

Maksim Sadim
Maksim Sadym

Het opstarten van DevTools is nu ~13% sneller 🎉 (van 11,2 seconden naar 10 seconden)

TL;DR; Het resultaat wordt bereikt door een redundante serialisatie te verwijderen.

Overzicht

Terwijl DevTools aan het opstarten is, moet het enkele oproepen doen naar de V8 JavaScript-engine .

Opstartproces van DevTools

Het mechanisme dat Chromium gebruikt om DevTools-opdrachten naar V8 (en voor IPC in het algemeen) te sturen, wordt mojo genoemd. Mijn teamgenoten Benedikt Meurer en Sigurd Schneider ontdekten een inefficiëntie tijdens het werken aan een andere taak en kwamen met een idee om het proces te verbeteren door twee overbodige stappen te verwijderen in de manier waarop deze berichten worden verzonden en ontvangen.

Laten we eens kijken hoe het mojo -mechanisme werkt!

De mojo mechanismen

De mojo-mechanismen

Er is een mojo-opdracht EvaluateScript die de JS-opdracht uitvoert. Het serialiseert de hele JS-opdracht inclusief de arguments in een reeks JavaScript-broncode die eval() kan zijn. Zoals je je misschien kunt voorstellen, kunnen deze snaren behoorlijk lang en duur worden. Nadat de opdracht door V8 is ontvangen, worden deze reeksen JavaScript-code gedeserialiseerd voordat ze worden uitgevoerd. Dit proces van serialiseren en deserialiseren voor elk afzonderlijk bericht zorgt voor aanzienlijke overhead.

Benedikt Meurer realiseerde zich dat serialisatie en deserialisatie van de arguments behoorlijk duur is, en dat de hele stappen "Serialize JS command to JS string" en "Deserialize JS string" overbodig zijn en kunnen worden overgeslagen.

Technische details: RenderFrameHostImpl::ExecuteJavaScript

Hoe we verbeterden

Verbeterde mechanismen

We hebben een andere mojo API-methode geïntroduceerd waarmee we de objectnaam, de aan te roepen methode en de lijst met argumenten rechtstreeks kunnen doorgeven, in plaats van dat we de reeks JavaScript-broncode moeten maken. Hierdoor kunnen we serialisatie en deserialisatie overslaan en is het niet meer nodig om de JavaScript-code te parseren.

Raadpleeg deze twee patches voor technische details over hoe we deze optimalisatie hebben geïmplementeerd:

  1. CL 2431864: [devtools] Verminder de prestatieoverhead van berichtverzending in de front-end
  2. CL 2442012: [devtools] Gebruik ExecuteJavaScriptMethod in DevTools

Invloed

Om de effectiviteit van de wijziging te meten, hebben we enkele metingen uitgevoerd waarbij Chromium-revisies cb971089a058 en 4f213b39d581 werden vergeleken (voor en na de wijziging).

Voor beide revisies hebben we het volgende scenario vijf keer uitgevoerd:

  1. Registreer tracering met chrome://tracing
  2. Open DevTools-op-DevTools
  3. Haal de opgenomen CrRendererMain trace op en vergelijk de V8-specifieke statistieken.

Op basis van deze experimenten opent DevTools ~13% sneller (van 11,2 seconden naar 10 seconden) met de optimalisatie.

Hoogtepunten, CPU-duur

Naam van methode Niet geoptimaliseerd (ms) Geoptimaliseerd (ms) Verschillen (ms) Snelheidsverbetering (%)
Totaal 11.213,19 9.953,99 -1.259,20 12,65%
v8.run 499,67 3.61 -496,06 12,65%
V8.Uitvoeren 1.654,87 1.349,61 -305,25 3,07%
v8.callFunction 1.171,84 1.339,77 167,94 -1,69%
v8.compileren 133,93 3.56 -130,37 1,31%

DevTools laadt CPU-tijd (ms)

Volledige vergelijkingstabel voor traceringsstatistieken

Als gevolg hiervan wordt DevTools sneller geopend en werkt het met minder CPU-gebruik . 🎉

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .