jQuery .html bremst Webseite aus #tudasnicht

Diese Woche hatten wir ein Problem ganz anderer Art.

Eine Single Site Applikation wurde extrem langsam geladen.

Mal abgesehen von der Architektur und der Umsetzung irrsinnigen Umsetzung der dynamischen Site mit jQuery und ajax Requests lief irgend etwas gar nicht rund.

Die stelle des Codes, in der das Lag von 14 Sekunden bis zu 55 Sekunden auftritt war schnell gefunden. Ein Ajax Request holte sich HTML Content vom Server, fügte diesen in ein Div ein und manipulierte anschließend noch verschiedene Dinge in diesem HTML Code.

Klingt ja schon mal ganz schön bescheuert…

Nach dem ich alle Funktionsaufrufe im Callback des Ajax Requestes entfernt hatte und nur noch das Ausblenden des Loader Gifs und das hinzufügen des HTML Codes enthalten waren, änderte sich an der Performance nichts.

Nachdem ich dann den jQuery Teil $(…).html(result) mit document.getElementById(…).innerHTML = result ersetzt hatte, lag die Antwortzeit nur noch bei 300 – 900 ms statt bei 14000 – 56000 ms bei ca 200 KB HTML Code.

Hier ein kleiner Test auf Fiddler

Die Frage WARUM? WTF? Bleibt weiter ungelöst.
Warum läd sich eine SSA (Single Site Application) HTML Code vom Server anstatt eine ordentliche JSON Struktur mit den Daten zu verarbeiten?
Warum werden alle Request wie bei einem Page Refresh bei jedem klick gefeuert?
Worin besteht der Sinn des Lebens?

Wir werden wohl nie Erfahren was sich der Entwickler dabei gedacht hat. Leider kann man ihm das auch nicht einfach wieder auf den Tisch schmeißen und sagen: „Hier mach dein Scheiß selbst“ 😀

Eine Überarbeitung oder wie man so schön sagt „Refactoring“ bleibt wohl nicht aus.
Ich bin für eine RestAPI und ein AngularJS Frontend.

 

Neue App in Arbeit.

Die Ausgangslage ist sicher sehr bekannt. Man muss mal wieder einkaufen gehen. Über WhatsApp oder Anruf kommen noch weitere Dinge hinzu. Oder man teilt sich auf und in dem einen Laden Gibt’s ein Angebot und man muss von seiner Liste nichts mehr einkaufen. Wieder muss man sich absprechen.

Daher hab ich mir nun eine App geschrieben die ich mit anderen Synchron abarbeiten kann oder ich Anpassungen der Liste direkt mit bekomme.

Ideal auch bei Partys , Alle füllen die Liste mit Essen und Getränken. Nun kann jeder davon was kaufen und niemand bringt mehr das gleiche mit und am Ende fehlt auf nichts. 😀

Ich hab die dann noch für den Umszug und Renovierung genutzt mit Einkaufszeug und TODO was noch gemacht werden muss.

Eingesetzt habe ich bis jetzt CSS und HTML für die Optik und JavaScript für die Technik. Um das ganze auf mehreren Plattformen zu verteilen habe ich Cordova eingesetzt.

Diese Diashow benötigt JavaScript.

Bootstrap Design Editor Pinegrow

Gestern erst habe ich von der Software gehört. Ein Prgramm um schnell, einfach und sauber Bootstrap Templates zusammen zu klicken. Das Ergebnis eine Augenweide der Code minimalistisch und Responsive. Neben dem vordefiniert Bootstrap Framework können auch templates über die URL geparst werden und dann weiter verarbeitet werden. Für mich als Entwickler endlich eine hervorragende Lösungen auch ohne Pixelschupsern schnell was eindrucksvolles darzustellen.

http://pinegrow.com