Wir freuen uns sehr, dass die Geschwindigkeit einiger häufiger DOM-Vorgänge sprunghaft angestiegen ist. Die Änderungen bezogen sich auf das WebKit-Level, wodurch die Leistung sowohl von Safari (JavaScriptCore) als auch Chrome (V8) verbessert wurde.
Chrome-Entwickler Kentaro Hara hat sieben Codeoptimierungen innerhalb von WebKit vorgenommen. Unten sehen Sie die Ergebnisse, die zeigen, wie viel schneller der JavaScript-DOM-Zugriff jetzt schneller ist:
Zusammenfassung der DOM-Leistungs-Boosts
div.innerHTML
unddiv.outerHTML
Leistung um das 2,4-Fache verbessert (V8, JavaScriptCore)div.innerText
- unddiv.outerText
-Leistung in Chromium/Mac um 4x (V8/Mac)- Zugriffe auf CSS-Properties um 35%verbessert (JavaScriptCore)
- Die Leistung von
div.classList
,div.dataset
unddiv.attributes
wurde um bis zu 10,9-mal verbessert (V8) - Leistung von
div.firstElementChild
,lastElementChild
,previousElementSibling
undnextElementSibling
um 7,1x verbessert (V8) - Der Zugriff auf V8-DOM-Attribute wurde um 4 bis 5%verbessert (V8)
Unten gibt Kentaro Hara Einzelheiten zu einigen der Pflaster, die er angefertigt hat. Die Links führen zu WebKit-Programmfehlern mit Testläufen, sodass du die Tests selbst ausprobieren kannst. Die Änderungen wurden zwischen WebKit r109829 und r111133 vorgenommen. Sie sind in Chrome 17 nicht enthalten, in Chrome 19 jedoch schon.
Leistung von div.innerHTML
und div.outerHTML
um das 2,4-Fache verbessern (V8, JavaScriptCore)
Vorheriges Verhalten in WebKit:
- Erstellen Sie für jedes Tag einen String.
- Hängen Sie einen erstellten String an
Vector<string>
an und parsen Sie die DOM-Struktur. - Weisen Sie nach dem Parsing einen String zu, dessen Größe die Summe aller Strings im
Vector<string>
ist. - Verketten Sie alle Strings in
Vector<string>
und geben Sie sie alsinnerHTML
zurück.
Neues Verhalten in WebKit:
1. Weisen Sie eine Zeichenfolge zu, z. B. S.
1. Verketten Sie für jedes Tag einen String mit S und parsen Sie dabei die DOM-Struktur inkrementell.
1. S als innerHTML
zurückgeben
Kurz gesagt erstellt der Patch, statt viele Zeichenfolgen zu erstellen und diese dann zu verketten, einen String und hängt dann einfach die Zeichenfolgen inkrementell an.
Leistung von div.innerText
und div.outerText
in Chromium/Mac um das 4x-Fache verbessern (V8/Mac)
Durch den Patch wurde gerade die anfängliche Puffergröße für das Erstellen von innerText
geändert. Durch das Ändern der anfänglichen Puffergröße von 2^16 auf 2^15 wurde die Chromium/Mac-Leistung um das Vierfache verbessert. Dieser Unterschied hängt vom zugrunde liegenden Malloc-System ab.
Leistung von CSS-Property-Zugriffen in JavaScriptCore um 35%verbessern
Ein CSS-Eigenschaftsstring (z.B. .fontWeight
, .backgroundColor
) wird in WebKit in eine Ganzzahl-ID konvertiert. Diese Umwandlung ist sehr hoch. Der Patch speichert die Konvertierungsergebnisse in einer Zuordnung (d.h. ein Eigenschaftsstring => eine Ganzzahl-ID), sodass die Konvertierung nicht mehrfach durchgeführt wird.
Wie funktionieren die Tests?
Damit wird der Zeitpunkt des Property-Zugriffs erfasst. Im Fall von innerHTML
(Leistungstest in bugs.webkit.org/show_bug.cgi?id=81214) wird mit dem Test lediglich die Zeit zum Ausführen des folgenden Codes gemessen:
for (var i = 0; i < 1000000; i++)
document.body.innerHTML;
Der Leistungstest verwendet einen großen Text, der aus der HTML-Spezifikation kopiert wurde.
Ebenso misst der CSS-„property-accesses“-Test die Zeit des folgenden Codes:
var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
spanStyle.invalidFontWeight;
spanStyle.invalidColor;
spanStyle.invalidBackgroundColor;
spanStyle.invalidDisplay;
}
Die gute Nachricht ist, dass Kentaro Hara glaubt, dass mehr Leistungsverbesserungen für andere wichtige DOM-Attribute und -Methoden möglich sein werden.
Los gehts!
Ein großes Lob an Haraken und dem Rest des Teams.