Rendering-Engine

[Orlok]

Hallo encoder

Mit solchen Seiten muss ich auch gelegentlich interagieren.
Meistens indem ich dem gewünschten Inhalt nachrenne, der durch die inzwischen üblichen mindestens 15 Scripte, Tracker und Werbeeinblendungen im Sekundentakt weiter herunter geschoben wird 😀

Das kenne ich nur zu gut. Die Performance der meisten Seiten die ich besuche ist eine Katastrophe. Wenn ich mit dem Smartphone im Internet bin, geht regelmäßig der Bildschirm in Stand-by, bevor die Seite bedienbar ist. Das ist unterirdisch. Dazu kommt dann das von dir beschriebene Verhalten, dass nach dem initialen Rendern der Seite durch Skripte in großem Umfang neue Elemente eingefügt werden, was zu einer Kaskade von Reflows und Repaints führt.

Besonders schön ist das natürlich, wenn das zugrundeliegende Dokument mit den begehrten Inhalten relativ zügig geladen und gerendert wurde, die Skripte aber etwas länger auf sich warten lassen. Dann gibt es ein Zeitfenster, in dem die Seite so aussieht, als wäre sie bedienbar. Just in dem Moment, in dem man dann eine Aktion ausführen will, wird dann aber das Layout neu berechnet und man klickt versehentlich auf ein anderes Element, wie beispielsweise einen Werbebanner. 😠

Fast immer ist das dann die letzte Aktion, die ich als Besucher der Seite ausführe. Für mich sind solche Seiten nicht bedienbar. Ich habe heutzutage, genervt durch das ständige Warten, sogar noch weniger Geduld mit Webseiten als früher. Will sagen, wenn eine Seite nicht in drei bis fünf Sekunden responsiv ist, bin ich üblicherweise weg. Andere sehen das vermutlich genauso. Für die meisten Webentwickler ist das aber offenbar kein Grund, das eigene Handeln kritisch zu hinterfragen. Performanz und damit auch Bedienbarkeit genießen bei den meisten Projekten anscheinend keine Priorität.

Die Verbreitung von JavaScript–Frameworks wie React oder Vue hat meiner Ansicht nach auch einen großen Anteil an den von dir beschriebenen, häufig anzutreffenden Problemen. Statt mehr oder weniger fertige Dokumente an den Client auszuliefern, werden heute große Teile der Seite, oft sogar fast alles, mittels JavaScript erzeugt. Auch wenn das aus fachlicher Sicht meistens Unsinn ist. Es genügt also nicht mehr, das Laden des Dokuments und eines Stylesheets abzuwarten, sondern es muss darauf gewartet werden, dass alle erforderlichen Skripte geladen und fehlerfrei ausgeführt wurden, bevor die Seite bedient werden kann. Falls sie bedient werden kann.

Sowohl React als auch Vue sind vom Konzept her deklarativ, was ja erstmal nicht schlecht ist. Leider hat das zur Folge, dass prinzipiell nicht vorgesehen ist, am bestehenden DOM der Seite Veränderungen vorzunehmen. Was React oder Vue vom Entwickler erwarten, ist die Bereitstellung von Templates für Komponenten. Daraus wird dann ein virtuelles DOM erzeugt, also im Wesentlichen eine Abstraktion des realen DOM, aus dem dann unter der Haube die richtige DOM–Repräsentation der Komponente generiert wird. Das heißt, es werden in jedem Fall neue Elemente erzeugt und der Seite hinzugefügt, selbst dann, wenn es einen Fallback für die Komponente gibt, dessen DOM hätte wiederverwendet werden können. Ein solcher wird dann üblicherweise wieder aus dem DOM entfernt und an dessen Stelle die neuen Elemente eingefügt. Die Folgen sind Reflow und Repaint.

Mit unobtrusive JavaScript hat das alles nichts mehr zu tun. Ich halte das auch für ein konzeptionelles Problem, sprich, schnellere Netzwerke und Prozessoren werden diesbezüglich keine spürbaren Vorteile bringen. Je schneller die Daten verarbeitet werden können, desto mehr Daten werden übermittelt. Der Schlüssel zu performanteren Webseiten ist, die Stärken der involvierten Technologien zu erkennen und sich ihrer zu bedienen.

Die Browser sind heute verdammt gut darin, empfangene HTML–Dokumente und Stylesheets schnell zu verarbeiten und dem Benutzer zugänglich zu machen. Das Ziel sollte also sein, sie möglichst ungestört ihrer Arbeit nachgehen zu lassen, damit den Besuchern der Seite die Basisfunktionalität so schnell wie möglich zur Verfügung steht. Mit JavaScript kann dann zusätzliche Funktionalität bereitgestellt werden, wobei aber darauf geachtet werden sollte, nicht alles über den Haufen zu werfen, sondern nach Möglichkeit mit dem zu arbeiten, was bereits vorhanden ist.

Viele Grüße,

Orlok