Grote boost voor DOM-prestaties - WebKit's innerHTML is 240% sneller

We zijn erg blij om te zien dat sommige veelvoorkomende DOM-bewerkingen zojuist in snelheid zijn gestegen. De wijzigingen waren op WebKit-niveau, waardoor de prestaties voor zowel Safari (JavaScriptCore) als Chrome (V8) werden verbeterd.

Chrome Engineer Kentaro Hara heeft zeven code-optimalisaties doorgevoerd binnen WebKit; hieronder staan ​​de resultaten, die laten zien hoeveel sneller JavaScript DOM-toegang is geworden:

DOM-prestaties verbeteren de samenvatting

Hieronder geeft Kentaro Hara details over enkele van de patches die hij heeft gemaakt. De links verwijzen naar WebKit-bugs met testcases, zodat u de tests zelf kunt uitproberen. De wijzigingen zijn aangebracht tussen WebKit r109829 en r111133: Chrome 17 bevat deze niet; Chroom 19 wel.

Verbeter de prestaties van div.innerHTML en div.outerHTML met 2,4x (V8, JavaScriptCore)

Vorig gedrag in WebKit:

  • Maak voor elke tag een tekenreeks.
  • Voeg een gemaakte string toe aan Vector<string> en parseer de DOM-structuur.
  • Wijs na het parseren een string toe waarvan de grootte de som is van alle strings in de Vector<string> .
  • Voeg alle tekenreeksen samen in Vector<string> en retourneer deze als innerHTML .

Nieuw gedrag in WebKit: 1. Wijs één string toe, bijvoorbeeld S. 1. Voeg voor elke tag een string toe aan S, waarbij de DOM-boom stapsgewijs wordt ontleed. 1. Retourneer S als innerHTML .

In een notendop: in plaats van veel strings te maken en deze vervolgens aan elkaar te koppelen, maakt de patch één string en voegt deze vervolgens eenvoudigweg stapsgewijs toe.

Verbeter de prestaties van div.innerText en div.outerText in Chromium/Mac met 4x (V8/Mac)

De patch heeft zojuist de initiële buffergrootte voor het maken van innerText gewijzigd. Het wijzigen van de initiële buffergrootte van 2^16 naar 2^15 verbeterde de prestaties van Chromium/Mac met een factor 4. Dit verschil hangt af van het onderliggende malloc-systeem.

Verbeter de prestaties van toegang tot CSS-eigendommen in JavaScriptCore met 35%

Een CSS-eigenschapsreeks (bijvoorbeeld .fontWeight , .backgroundColor ) wordt in WebKit geconverteerd naar een geheel getal-ID. Deze conversie is zwaar. De patch slaat de conversieresultaten op in een kaart (dat wil zeggen een eigenschapsreeks => een geheel getal-ID), zodat de conversie niet meerdere keren wordt uitgevoerd.

Hoe werken de tests?

Ze meten de tijd van toegang tot eigendommen. In het geval van innerHTML (de prestatietest in bugs.webkit.org/show_bug.cgi?id=81214 ), meet de test alleen de tijd die nodig is om de volgende code uit te voeren:

for (var i = 0; i < 1000000; i++)
    document.body.innerHTML;

De prestatietest maakt gebruik van een grote tekst die is gekopieerd van de HTML-specificatie.

Op dezelfde manier meet de test voor CSS-eigenschaptoegang de tijd van de volgende code:

var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
    spanStyle.invalidFontWeight;
    spanStyle.invalidColor;
    spanStyle.invalidBackgroundColor;
    spanStyle.invalidDisplay;
}

Het goede nieuws is dat Kentaro Hara gelooft dat er meer prestatieverbeteringen mogelijk zullen zijn voor andere belangrijke DOM-attributen en -methoden.

Kom maar op!

Een pluim voor Haraken en de rest van het team.