kostenloser Webspace werbefrei: lima-city


Browser Belastung Inhalt AJAX Scroll

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    aklasse

    Kostenloser Webspace von aklasse

    aklasse hat kostenlosen Webspace.

    Hallo!

    Für ein Blog System möchte ich, das von Seiten wie 9gag oder der Facebook Timeline eingeführte, dynamische Laden beim Scrollen einbauen. Also wenn man am unteren Ende der Seite angelangt ist werden Inhalte nachgeladen.
    Da diese Seite dadurch natürlich sehr lang werden kann suche ich nach Möglichkeiten die Last für den Browser zu verringern.

    Ergibt es Sinn wenn man Elemente (Blog-Einträge) die nicht mehr sichtbar sind (weil man schon vorbei gescrollt hat) über
    visibility:hidden;
    auszublenden? Verringert das die Last die der Browser zum rendern der Seite benötigt?
    Die Einträge ganz aus dem DOM zu entfernen würde vermutlich die Scrollbar springen lassen, was ich nicht möchte. Außerdem sollen die Einträge schnell wieder sichtbar werden wenn man zurück nach oben scrollt.

    Macht dieses ausblenden daher Sinn?
    Hat jemand damit erfahrung gemacht?
    Wie machen es denn andere Seiten?

    Vielen Dank für eure Hilfe! :thumb:

    Beste Grüße,
    Stefan
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    aklasse schrieb:
    Da diese Seite dadurch natürlich sehr lang werden kann suche ich nach Möglichkeiten die Last für den Browser zu verringern.
    Wie aufwendig ist die Seite (Bilder, Tabellen, ...)? Und wie viele "Einträge" können da überhaupt maximal "auftreten"? Einige hundert? Oder eher einige Tausend - Zehntausend?


    aklasse schrieb:
    Ergibt es Sinn wenn man Elemente (Blog-Einträge) die nicht mehr sichtbar sind (weil man schon vorbei gescrollt hat) über
    visibility:hidden;
    auszublenden? Verringert das die Last die der Browser zum rendern der Seite benötigt?
    Das müsstest du mit einem Benchmarkscript herausfinden... damit würdest du auch herausfinden bis wieviele Einträge deine Seite noch "verwendbar" ist.

    Mit "Benchmark" meine ich ein Script, das dir "Demobeiträge" in großer Zahl generiert. Die Beitragsanzahl erhöhst du dabei immer weiter bis die Seite einfach zum hängen (laggen) anfängt. Das musst du allerdings in mehreren Browsern testen (IE, FF, Chrome, ..) um dann entscheiden zu können wie viele Beiträge noch verkraftbar sind. Dann kannst du das auch mit "visibliity: hidden" austesten und vergleichen ob das irgendwelche Vorteile bringt...


    aklasse schrieb:
    Außerdem sollen die Einträge schnell wieder sichtbar werden wenn man zurück nach oben scrollt.
    Dabei sei noch gesagt: wenn du sehr viele Beiträge hast die du auf einmal (vermutlich per Javascript) wieder tritt erhöhte CPU-Last auf... und perfekt schnell wie du es dir wünschst ist das nicht.

    Aber wie gesagt, probier es aus, dann weißt du bis zu wie vielen Einträge deine Strategie funktioniert.
  4. aklasse schrieb:
    Verringert das die Last die der Browser zum rendern der Seite benötigt?

    Ich würde eher vermuten, daß die Browserlast dadurch sogar steigt.

    Dargestellte Teile der Seite sind bereits gerendert und und dürften afaik den Browser nicht weiter belästigen. Ein ausblenden hingegen müßte eine zusätzliche Last hervorrufen.

    Aber wie so oft gilt: Versuch macht kluch. ;)
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    fatfreddy schrieb:
    Dargestellte Teile der Seite sind bereits gerendert und und dürften afaik den Browser nicht weiter belästigen. Ein ausblenden hingegen müßte eine zusätzliche Last hervorrufen.
    Er meint vermutlich "je größer die Seite desto mehr Zeit braucht der Browser das auf den Bildschirm zu malen". Stimmt nur teilweise... jeder moderne Browser sollte nur den Bereich "berechnen" den du auch siehst und nicht alles... was aber nicht heißt, dass deshalb die Last niedrig wäre wenn die Seite groß ist (mach den Benchmark und staune)...

    Der sinnvollste Ansatz wäre am Anfang eine Art "Endless Scrolling" so wie du es vor hast, aber nur bis z.b. 1000 Einträge, danach kommt ein Knopf "weiter" auf den du drückst und die nächsten 1000 Einträge werden per AJAX dynamisch beim scrollen nachgeladen.

    Grund: Paging braucht immer weniger Ressourcen als Endless Scrolling, und mehr als soviel wie der Bildschirm groß ist siehst du sowieso nicht gleichzeitig...
  6. Bei 9GAG ist es ja so, dass man ein paar mal nach unten scrollen kann und irgendwann kommt dann eben so ein Button bei dem man auf eine neue Seite gehen kann, wie hackyoulife geschreiben hat.

    Ich glaube auch nicht, dass es sinnvoll wäre Sachen von oben auszublenden und ich denke das wäre auch sehr schwer umzusetzen.
    Bei display: none und visibility: hidden weiß ich nicht ob das was bringen würde.

    MfG
    Dominic
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!