Posteingang

Sollte sich mal irgendjemand, der das hier liest und ein wenig mit Javascript + HTML rumbastelt, wundern, warum sein Browser zum Rendern von ein wenig HTML-Code ewig braucht, wenn man in einer Schleife mehrere Einträge z.B. wie hier in einen Layer schreibt…

for(var i=0; i<200; i++) layer.innerHTML += "Dies ist ein Test!";

…dann liegt es daran, dass der Rechenaufwand beim Rendern mit jedem Eintrag scheinbar exponentiell ansteigt. Jedenfalls in Mozilla & co. Bei jedem Durchlaufen der Schleife wird der HTML-Code des Layers ausgelesen, um den Eintrag erweitert und wieder in den Layer geschrieben, worauf diese komplett neu rendert – es wird nicht nur das letzte Häppchen HTML-Code dazugerendert. Die Lösung liegt daher nahe: Den HTML-Code erst in eine Variable schieben, dann ganz am Ende erst rendern:

var htmlCode = “;

for(var i=0; i<200; i++) htmlCode += "Dies ist ein Test!"; layer.innerHTML = htmlCode;

Dann gehts etliche Male schneller, das merkt man schon so ab 10-20 Schleifendurchläufen.

Das nur am Rande. Der eigentliche Anlass des Eintrags ist folgendes Bildchen, das den aktuellen Stand des Posteingangs zeigt. Das Design ist sicher noch nicht endgültig, zeigt aber denke ich ganz gut, in welche Richtung es geht. Und ja: die rechts dargestellte Mail passt nicht zu der links angeklickten Mail – das ist nur ein Testdatensatz.

Posteingang

Sollte die Auflösung nicht breit genug sein, wird das Vorschaufenster anders angeordnet (Danke für den Tipp, aaaaa!):

Layout2

5 Antworten zu “Posteingang”

  1. Nils (UNC) sagt:

    Ja, das ist so ein „Feature“ von Mozilla… Ich weiß jetzt gerade auch nicht, ob das so gewollt / korrekt ist 😉

    Das Interface sieht gut aus!

  2. aaaaa sagt:

    Schön sieht es aus, keine Frage. Nur braucht man dafür wohl noch mehr als in der alten Version einen riesigen Monitor, wenn das alles so schön nebeneinander bleibt. Was machen User mit Auflösungen von 800×600? Da verschiebt es schon das aktuelle Standard-Design.

  3. patrick sagt:

    Hmm, ich denke mal, dass sich dann das E-Mail-Vorschaufenster unter die Mailliste verschiebt 🙂

  4. Timm sagt:

    Sieht aber sehr geiler aus, besser als in dem Vote-Thread im Board. _jetzt_ bin ich dafür, zumindest optional.

  5. patrick sagt:

    Das Bild ist das gleiche 😉

Hinterlasse eine Antwort