Overhead von AngularJS-Direktiven für eigene HTML-Tags

Die Transformation selbstdefinierter HTML-Tags in Standard-Tags mit AngularJS-Direktiven läuft schnell; beim Masseneinsatz auf einer Webseite summieren sich die Millisekunden aber schnell zu signifikanten Werten auf.

Ich liebe es, mit wiederverwendbaren Softwarekomponenten zu arbeiten und im Geiste von Don't Repeat Yourself (DRY) selbst möglichst viel Programmcode in selbstgeschriebene Komponenten auszulagern. In diesem Sinne erlauben Direktiven in Googles JavaScript-Framework AngularJS es dem Webentwickler, eigene HTML-Tags zu definieren, die dann im Browser von AngularJS in Standard-Tags transformiert werden.

Zum Beispiel kann man den Einsatz von Twitter-Bootstrap-CSS-Klassen prägnanter realisieren. Statt

<div class="row">
 <span class="col-xs-2" style="background: greenyellow">
        Zeile 1 - Spalte 1</span>
 <span class="col-xs-2" style="background: lightpink">
        Zeile 1 - Spalte 2</span>
 <span class="col-xs-4" style="background: lightskyblue">
        Zeile 1 - Spalte 3</span>
 <span class="col-xs-4" style="background: khaki">
        Zeile 1 - Spalte 4</span>
</div> 

kann man mit mit selbstdefinierten Tags <row> und <xs*> deutlich prägnanter schreiben:

<row>
 <xs2 bgcolor="greenyellow">Zeile 1 - Spalte 1</xs2>
 <xs2 bgcolor="lightpink">Zeile 1 - Spalte 2</xs2>
 <xs4 bgcolor="lightskyblue">Zeile 1 - Spalte 3</xs4>
 <xs4 bgcolor="khaki">Zeile 1 - Spalte 4</xs4>
</row>

Die Frage stellt sich aber, welche Leistung eine AngularJS-Transformation beansprucht. Ich habe den Leistungsverlust gemessen: 100 <div>-Tags mit jeweils vier <span>-Tags mit den Standardtags versus der gleichen Anzahl selbstdefinierter <row>-Tags mit <xs2> und <xs4>.

Die Registerkarte "Timeline" in den Entwicklertools von Google Chrome Version 44 liefert folgende Ergebnisse:

a) ohne Direktiven

b) mit Direktivem

Wenn man die Zeiten für "Scripting" (rund 210 ms rund 710 ms) vergleicht, beträgt der Geschwindigkeitsverlust insgesamt 500 ms, also 5 ms pro Zeile beziehungsweise eine Millisekunde pro eingesetzter Direktive. Das ist pro Direktive nicht viel, aber es "läppert" sich natürlich zusammen, wenn auf einer Seite sehr viele Direktiven transformiert werden müssen. Den massenhaften Einsatz eigener Direktiven auf einer Webseite sollte man also vermeiden, zumal die obigen Leistungsdaten von einem leistungsfähigen PC stammen und es ja bekanntlich auch weniger leistungsfähige Endgeräte auf dem Markt gibt.

Weitere Informationen zu AngularJS-Direktiven gibt es in meinen Vortragsfolien "Wiederverwendbare AngularJS-Komponenten mit Direktiven" von Developer Week (DWX) im Juni 2015. Eine weitere Leistungsmessung zu diesem Thema findet man bei Ben Nadel. ()