Deutlicher Anstieg der DOM-Leistung – innerHTML von WebKit ist 240% schneller

Dutton

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

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 als innerHTML 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.