Was gibt ein Browser her an Performance, usw

[Hannes Weninger]

Hallo,

ich programmiere gerade eine Applikation mit AngularJS (also einer Single Page Anwendung) und frag mich jetzt schon die ganze Zeit, vor alles wenn ich eine neue Js- Lib inkludiere, was so ein Browser hergibt bzw. an initialem Laden verträgt.

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

Danke! Hannes

[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

[Hannes Weninger]

danke für die ausführliche Antowrt!!!! Beste Grüße Hannes

[dedlfix]

Tach!

Während der JavaScript-Code geladen und ausgeführt wird, muss der User warten und sieht bei Single-Page-Apps üblicherweise noch nichts.

Naja, das kommt drauf an, wo man das display:none ansetzt, damit der Nutzer keine/kaum Platzhalter sieht (stichwort ngCloak bei AngularJS). Aber bevor das Javascript geladen werden kann, müssen zumindest Teile vom HTML-Code geladen worden sein. In denen kann man durchaus dem Nutzer etwas anzeigen.

Ich empfehle dir zu messen, wie schnell deine Anwendung startet.

Ja, unbedingt, auch in unterschiedlichen Situationen, vor allem, wenn zur Zielgruppe auch mobile Anwender gehören. Dafür empfiehlt es sich auch ein billiges und leistungsschwaches Testgerät zu verwenden. Natürlich sind auch Tests im LAN nur beschränkt aussagekräftig, wenn es sich nicht nur um eine firmeninterne Anwendung handelt. Bei virtuellen Maschinen kann man jedoch mitunter eine gedrosselte Netzwerkverbindung simulieren.

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.

Zu beachten ist dabei, dass die Browser einen Cache haben, der sich positiv auswirkt, wenn man wiederholt Seiten abruft. In den Entwickler-Tools der Browser kann man deswegen den Cache ausschalten.

dedlfix.

[marctrix]

Hej dedlfix,

Ich empfehle dir zu messen, wie schnell deine Anwendung startet.

Ja, unbedingt, auch in unterschiedlichen Situationen, vor allem, wenn zur Zielgruppe auch mobile Anwender gehören.

Ergänzung: inzwischen sind die meisten Menschen mit Mobilgeräten im Web unterwegs.

Zwei Faustregeln sind mir bekannt:

1.) die Seite sollte spätestens nach drei Sekunden etwas zeigen. Da in mobilen Netzen die Verbindung zum Server bis zu zwei Sekunden daurn kann, bedeutet das: die Seite hat eine Sekunde!

2.) Ein Mbyte sollte niemals überschritten werden (inklusive aller Skripte, Bilder usw)

Je weiter man von diesen Empfehlungen nach unten abweicht, desto besser.

Nach 5 Sekunden sind etwa 3/4 aller Handynutzer weg, knapp die Hälfte für immer!

Bleibt mir am Schluß nur mein ständiger Hinweis: Speed is a feature

Also http-Requests und Dateigröße so klein wei möglich halten.

Noch ein Hinweis zu den Nachteilen rechenintensiver Webseiten: Mobilgeräte werden dabei mitunter warm (vor allem, wenn andere Aufgaben wie Navigation o. ä. im Hintergrund laufen, man hat einen Rechner nie für sich allen). Manchmal so warm, dass es unangenehm wird oder sogar so warm, dass der Prozessor in seiner Leistung beschränkt wird. Dann wird aus einer langsamen Webseite eine unbenutzbare Webseite...

Gruß,

Marc

[Gunnar Bittersmann]

@@Hannes Weninger

ich programmiere gerade eine Applikation mit AngularJS (also einer Single Page Anwendung) und frag mich jetzt schon die ganze Zeit, vor alles wenn ich eine neue Js- Lib inkludiere, was so ein Browser hergibt bzw. an initialem Laden verträgt.

„Die ganze Zeit“? Das kann ich nicht glauben. Die Frage hättest du dir bereits stellen sollten, bevor du angefangen hast, die Anwendung mit AngularJS zu programmieren. Womöglich wäre die Entscheidung dann gegen eine Single-Page-Applikation gefallen.

Wie dedlfix schon andeutete, geht es nicht so sehr um die Ladezeit für die ganze Anwendung, sondern um die gefühlte Ladezeit, bis der Nutzer

1. den Inhalt sieht und
2. schon mit der Seite interagieren kann.

Wenn dann im Hintergrund noch weitere Script nachgeladen werden, stört das weniger.

LLAP 🖖

[dedlfix]

Tach!

ich programmiere gerade eine Applikation mit AngularJS (also einer Single Page Anwendung) und frag mich jetzt schon die ganze Zeit, vor alles wenn ich eine neue Js- Lib inkludiere, was so ein Browser hergibt bzw. an initialem Laden verträgt.

„Die ganze Zeit“? Das kann ich nicht glauben. Die Frage hättest du dir bereits stellen sollten, bevor du angefangen hast, die Anwendung mit AngularJS zu programmieren. Womöglich wäre die Entscheidung dann gegen eine Single-Page-Applikation gefallen.

Das setzt voraus, dass man schon Erfahrung mit SPAs im Allgmeinen oder AngularJS im Speziellen hat. Ohne diese kann man sehr schlecht einschätzen, ob Performance eine Rolle spielt oder der Mehraufwand für eine bestimmte Technik schlicht im Grundrauschen untergeht. Insofern sehe ich es als durchaus legitim an, erstmal mit einem Werkzeug anzufangen, das einem die Lösung des eigentlichen Problems zu erleichtern verspricht und sich erst ab einer bestimmten Größe mit der Performance-Frage zu beschäftigen, wenn man genügend da hat, an dem man selbige bewerten kann.

Außerdem steht Version 2 von AngularJS vor der Tür und damit wird alles noch viel toller und vor allem schneller - sagt man.

dedlfix.

[Tabellenkalk]

Hallo,

Außerdem steht Version 2 von AngularJS vor der Tür und damit wird alles noch viel toller und vor allem schneller - sagt man.

Ist das dann dieses berüchtigte Web2.0?

Gruß
Kalk

[Gunnar Bittersmann]

@@dedlfix

Außerdem steht Version 2 von AngularJS vor der Tür und damit wird alles noch viel toller und vor allem schneller - sagt man.

Man sagt auch, dass Version 1 nie dazu bestimmt war, produktiv eingesetzt zu werden.

In The problem with Angular geht PPK auch auf die Performance-Probleme von Angular ein.

LLAP 🖖

[dedlfix]

Tach!

In The problem with Angular geht PPK auch auf die Performance-Probleme von Angular ein.

Hab ich da nicht aufmerksam gelesen? Ich sehe da nur dass er viele Meinungen zusammenträgt. Auf die Performance geht er ein, indem er den von anderen durchgeführten Vergleich zwischen einigen bekannten Frameworks erwähnt. Erinnert mich eher an einige deiner Postings, kaum Erklärungen, viele Verlinkungen ;)

Mein TL;DR dieses Artikels ist: Es gibt Befindlichkeiten.

dedlfix.