HTML Veränderungen per JS auf iPad sehr langsam

[SHP]

Hi zusammen,

ich hoffe mit meinem Thema hier richtig zu sein. Es geht um folgendes:
Per AJAX hatte ich einen serverseitig generierten HTML Content abgefragt, der per innerHTML einem div zugewiesen (überschrieben) wurde.

Das funktioniert auf Android recht schnell, allerdings auf meinem iPad ist der Aufbau des neu eingefügten Contents sehr langsam.
Es sind in etwa 50 Elemente, die in drei Ebenen verschachtelt sind. Darunter befindet sich auch ein Bild.
Allein der Aufbau für den reinen Text (und dessen CSS Anwendung), dauert gefühlt eine Sekunde und bis dann das Bild kommt nochmals gefühlt ne Sekunde.

Daraufhin habe ich das AJAX mal rausgenommen und mir den Response String hardcoded in einer JS Funktion dem selben DIV zugewiesen (ebenfalls per innerHTML). => keine Verbesserung.

Danach habe ich den Content mal als DOM Struktur angelegt und dem DIV angehangen, was leider ebenfalls keine spürbare Verbesserung brachte.

In kurz, sobald ich per JS einen HTML Block ersetze, dauert dessen Aufbau störend lang auf dem iPad (interner Browser).

Ist das die Veränderung an sich, oder dauert das anwenden des CSS u.U. nur sehr lang?
Hat jemand grundsätzlich Erfahrung in diesem Bereich gesammelt?
Gibt es generell unter iOS sehr unperformante Dinge, die ich vermeiden sollte?
Ist ein Offline Projekt, daher erst mal kein Link.

 

[tsseh]

ohne zu wissen, was du wann wie einfügst(gut das wie wissen wir ja im prinzip), wird dir niemand etwas genaues sagen können.
du solltest nicht viele kleine änderungen am dom vornehmen, sondern wenige große, das mal als richtlinie.

Gibt es generell unter iOS sehr unperformante Dinge, die ich vermeiden sollte?

iOS

 

[SHP]

Ich setze in der Tat nur einen DIV Content. Darin wird ein DIV mit in etwa 50 Elementen gesetzt. Also echt nix großes.
Habe nun auch mal jQuery wie folgt verwendet:
$('#rightContent').html(content);
Dachte jQuery könne mir evtl. im Hintergrund ein paar browserbezogene Optimierungen vornehmen, nur leider auch hier keine Geschwindigkeitsverbesserung.

Mein Design hat links eine Div mit einer Liste an Links, die im href ein JS aufrufen um den rightContent (das div rechts von der Liste) Inhaltlich auszutauschen.

 

[tsseh]

Dachte jQuery könne mir evtl. im Hintergrund ein paar browserbezogene Optimierungen vornehmen, nur leider auch hier keine Geschwindigkeitsverbesserung.

eher komfortabler als performanter

und wie sieht es denn mit einem anderen browser aus? wie läuft das auf einem pc?
ein tablet ist nun auch kein rennpferd und "gefühlt ne Sekunde" würde ich da durchaus für möglich halten.
sind viele bilder dabei? aufwendige formatierungen(gradient...)?

 

[SHP]

danke für deine Tipps.
Bilder sind's in etwas 25 (sehr kleine) und alle sind immer wieder gleich - sprich sollten aus'm Cache kommen.
Bis auf das eine oben genannte, das je Link unterscheidet.

Bzgl. transitions und shadow hatte ich auch schon mal was gelesen, die habe ich in dem Zuge aus dem CSS auskommentiert.
Gradients habe ich nun auch noch entfernt, wodurch es jedoch ebenfalls nicht schneller geht.

EDIT:
Die Bilder habe ich nun zum Großteil mal rausgenommen. Leider wie bei allen anderen Tests keine Besserung.

 

[SHP]

Aktuell hab ich das gesamte CSS mal rausgenommen.
Das bringt zwar eine spürbare Verbesserung, jedoch ist die Geschwindigkeit nun in etwa wie bei Android mit CSS.
Liegt es an der HTML Struktur?
Gibt es da was zu beachten? Sind bestimmte Header Daten evtl. mit Vorsicht zu genießen oder andersherum evtl. Performance steigernd?

 

[SHP]

So... es konnte ja nach letztem Post nur am CSS liegen, da ohne CSS Files die Geschwindigkeit gleich der von Android mit CSS war.
Was ich bisher nicht rausgenommen hatte, war ein blur für das Hintergrundbild. Da Android das gar nicht kann, kam dort die Verzögerung nicht zustande.
Nach dem Entfernen dieses Befehls, läuft's nun auch unter iOS flüssig.

Danke trotzdem für die Tipps.

 

[miniA4kuser]

Schön das es nun wie gewünscht funktioniert. Wie wäre es denn aber mit etwas Beispielcode zu diesem "blur für das Hintergrundbild" falls mal jemand in diesem Forum danach sucht?