Fragen zum erstellen moderner Webseiten

[1unitedpower]

einem Spezialisten für HTML und CSS, Acessibility injlusive Konzept hierfür und mindestens Grundkenntnissen in JS, SEO, SEM (sonst ist hierfür ein weiterer Spezialist nötig)

Was der Frontender auch sein muss: Spezialist für performance. Und da sind wohl mehr als nur Grundkenntniss in JS erforderlich – nur halt andere JavaScript-Kenntnisse als die ein Angular-Backend-Entwickler haben muss.

Im Gegenteil Frameworks sind eine große Hilfe dabei häufige Performance-Engpässe zu vermeiden. Die Herausforderung beim Optimieren liegt darin, die Unterschiede des eigenen intuitiven Verständnis der JavaScript-Semantik mit den internen Vorgehensweisen der JIT-Compiler zu überbrücken. Dass es verschiedene JS-Engines gibt, gegen die man profilen muss, erleichtert die Sache nicht gerade. Da ist es äußerst von Vorteil auf das Know-How der Framework-Entwickler(innen) zurückgreifen zu können. Ich möchte zwei Beispiele für solche Engpässe geben, deren Vorkommen von einem Framework (exemplarisch an React) gemindert werden.

• JavaScript hat eine automatische Müllsammlung, die dafür sorgt, dass nicht mehr benötigte Objekte aus dem Speicher entfernt werden. Dadurch werden Speicher-Leaks vermieden, aber natürlich kann das nicht ohne Overhead geschehen - wenn die Garbage-Collection arbeitet, muss die Code-Ausführung zeitweise unterbrochen werden. Bei ungünstigen Umständen wird die Garbage-Collection vom Browser sehr oft angestoßen und die Unterbrechungen werden spürbar. React implementiert sogenanntes Object-Pooling: Das ist eine Strategie, die die Umstände so zum besseren wendet, dass die Garbage-Collection seltener ausgeführt wird.
• Mein zweites Beispiel bezieht sich auf DOM-Manipulationen. DOM-Updates sind ein Standard-Beispiel für Performance-Engpässe. Die API ist historisch immer weiter angewachsen und zu einem irre komplexen Gebilde geworden. Kritisch dabei ist, dass DOM-Updates sehr häufig synchron mit dem JavaScript-Prozess ausgeführt werden. Fügt man einem Element nur eine Klasse hinzu, pausiert die Code-Ausführung und die Rendering-Enginge zeichnet (vereinfacht ausgedrückt) einen neuen Frame. Danach kann die JavaScript-Engine weiter arbeiten. React batcht deshalb DOM-Manipulationen und versucht vor der Anwendung eine minimale Menge an DOM-Operationen zu finden, die tatsächlich ausgeführt werden müssen, um das gewünschte Ergebnis zu erzielen.

Beide Optimierungsstrategien erfordern außerordentliches Detailwissen über die Funktionsweise eines Browsers. Ein(e) React-Anwendungsentwickler(in) muss diese Details allerdings nicht kennen, um von den Performance-Boosts effektiven Gebrauch zu machen, weil das Framework es transparent vor ihm oder ihr regelt.