off

Browser-Performance: JavaScript vs. HTML

Gestern bin ich auf AjaxLine.com auf einen interessanten Artikel gestoßen, der sich mit der Performance von Browsern bezüglich JavaScript befasst. Wie der Titel “The Browsers Performance in Dependence of HTML Coding” schon sagt, ist dieser Artikel kein weiterer reiner Vergleich der JavaScript-Engines verschiedener Browser. Vielmehr beschäftigt er sich damit, wie performant Browser JavaScript in Abhängigkeit vom zu rendernden HTML-Code ausführen.

Der Autor, Sergey Chikuyonok (Blog), hat verschiedene HTML-Konstrukte in folgenden Browsern getestet: IE6, IE7, IE8b2, FF2, FF3, FF3.1a, Opera 9.62, Chrome 0.3, Safari 3.1.2, FF3 (Mac), FF3.1a (Mac), Safari 3.1.2 (Mac), Opera 9.6.1 (Mac), WebKit r37790 (Mac).
Es wurde beispielsweise überprüft, ob absolute oder relative Positionierung von Elementen performanter ist, oder wie sich die Anzahl der DOM-Elemente auf die Browser-Performance auswirkt. Die Ergebnisse der einzelnen Test sind jeweils grafisch aufbereitet dargestellt. Aus besonders eindeutigen Ergebnissen formuliert Chikuyonok außerdem klare Handlungsanweisungen.
Am Ende des Artikels befindet sich ein Resümee, in dem folgende Maßnahmen zur Verbesserung der Browser-Performance vorgeschlagen werden:

interaktive Elemente sollten absolut positioniert werden
interaktive Elemente sollten bereits von Anfang an bedacht und eingeplant und nicht nachträglich eingefügt werden
zu viele Elemente auf einer Seite können sich negativ auf die Performance auswirken
gleiches gilt für zu tiefes Verschachteln von Elementen
das Verwenden von <img />-Elementen ist performanter als das Einsetzen des Background-Image-Attributs
Bilder sollten nicht vom Browser skaliert werden

Die getesteten HTML-Konstrukte sind typisch für Szenarien, in denen DOM-Manipulation über JavaScript stattfindet. Doch das Befolgen einiger der vorgeschlagenen Maßnahmen – wie beispielsweise der Verzicht auf Skalierung von Bildern über den Browser – ist sicher auch ratsam, wenn kein JavaScript zum Einsatz kommt.

via spic