Was gibt ein Browser her an Performance, usw

[Richard]

Hi,

Daher meine Frage, wieviel kb/MB man initial in den Browser laden kann. Habt ihr da Erfahrung - wär dankbar für jeden Hinweis.

Browser haben da keine feste Beschränkung. Sie können theoretisch hunderte Megabyte JavaScript laden und ausführen. Ob das praktisch möglich ist, hängt vom Browser und von den Fähigkeiten des Geräts ab, auf dem der Browser läuft.

Bei der Einbindung von JS-Code werden Ressourcen verbraucht:

• Der Code muss heruntergeladen und ggf. entpackt werden. Das benötigt Zeit, Speicher und erzeugt Datenverkehr.
• Der Code muss geparst werden. Das beansprucht CPU-Zeit und Speicher.
• Der Code muss ausgeführt werden. Das beansprucht CPU-Zeit, je nachdem was der Code tut.
• Der Code erzeugt Werte/Objekte im Speicher. Manche Objekte bleiben bestehen und beanspruchen Arbeitsspeicher, andere gleich wieder weggeworfen (Garbage Collection).

Einige Einschränkungen und Umstände, die mir einfallen:

• Datenverkehr kann den User direkt Geld kosten.
• Die CPU-Power der Geräte variiert stark. Rechnen verbraucht möglicherweise Energie der Batterie.
• Die Größe des verfügbaren Arbeitsspeichers variiert ebenfalls. Viele Geräte haben nur geringen Arbeitsspeicher, z.B. 256 oder 512 MB, von denen nur ein kleiner Teil der JS-Engine für eigene Objekte zur Verfügung steht. Mit dem Speicher muss man also sparsam umgehen. Weitere Bibliotheken erzeugen mehr permanente Objekte im Speicher.

Während der JavaScript-Code geladen und ausgeführt wird, muss der User warten und sieht bei Single-Page-Apps üblicherweise noch nichts. Unter Umständen friert die Seite bei der JS-Ausführung ein. Für die User-Experience ist es wichtig, dass eine Anwendung in überschaubarer Zeit (zumindest teilweise) gestartet ist. Das sollten bestenfalls ein paar Sekunden sein, danach sind User genervt oder springen sogar ab.

Ich empfehle dir zu messen, wie schnell deine Anwendung startet. Das umfasst das Übertragen aller nötigen Daten (HTML, CSS, JS, Grafiken usw.). In neueren Browsern kannst du mit den Dev-Tools aufdröseln, wo die Zeit verbraucht wird (Übertragung, Parsing, Ausführung usw.) und sehen, welche Objekte wie viel Speicher beanspruchen. Es gibt auch Dienste wie WebPageTest, mit denen du die Ladeperformance überwachen kannst.

Wenn du neue Bibliotheken einbindest, zeigen sich dann die Auswirkung auf die Ladeperformance. Anders herum kannst du auf Bibliotheken verzichten und messen, ob sich die Ladeperformance verbessert.

Grüße Richard