Browser Belastung Inhalt AJAX Scroll
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausblenden
berechnen
bildschirm
browser
code
dargestellte teile
element
entfernen
hundert
knopf
last
machen
malen
ressource
sinn
springen
suche
treten
url
zehntausend
-
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
auszublenden? Verringert das die Last die der Browser zum rendern der Seite benötigt?visibility:hidden;
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!
Beste Grüße,
Stefan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
aklasse schrieb:
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?
Da diese Seite dadurch natürlich sehr lang werden kann suche ich nach Möglichkeiten die Last für den Browser zu verringern.
aklasse schrieb:
Das müsstest du mit einem Benchmarkscript herausfinden... damit würdest du auch herausfinden bis wieviele Einträge deine Seite noch "verwendbar" ist.
Ergibt es Sinn wenn man Elemente (Blog-Einträge) die nicht mehr sichtbar sind (weil man schon vorbei gescrollt hat) über
auszublenden? Verringert das die Last die der Browser zum rendern der Seite benötigt?visibility:hidden;
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:
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.
Außerdem sollen die Einträge schnell wieder sichtbar werden wenn man zurück nach oben scrollt.
Aber wie gesagt, probier es aus, dann weißt du bis zu wie vielen Einträge deine Strategie funktioniert. -
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. ;)
-
fatfreddy schrieb:
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)...
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.
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... -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
