Performantester Ticker

[Jeena Paradies]

Hallo,

Ich suche nach der performantesten Methode einen Ticker in eine Seite einzubauen. Mit Ticker meine ich, dass ein Text von links nach rechts durchläuft und wenn er durchgelaufen ist sich dann selbst wieder aufruft, wobei sich die Inhalte geändert haben können, aber nicht müssen. Er sollte den Rechner aber so wenig wie möglich belasten, da noch ein anderes JS Script gleichzeitig läuft, welches ziemlich viel Text bewegen muss. Wenn dann beide gleichzeitig laufen dann kann das ganze auf langsamen Rechnern ziemlich ins Stocken geraten.

Den Anfang habe ich mir schon denke ich ganz gut überlegt. Die Tickerdaten liegen als Textdatei (oder XML Datei) auf dem Server. JavaScript fragt sie mittels XMLHttpRequest ab, dabei wird IfModifiedSince verwendet und wenn sich die daten seit der letzten Abfrage nicht verändert haben, dann wird einfach das gleiche noch einmal über den Bildschirm geschickt. Falls sich die Daten geändert haben werden die neuen Daten über den Bildschirm geschickt. So weit so gut.

Wie bewege ich aber jetzt den Text von links nach rechts, so dass sie sich sosmoth wie möglich bewegen aber dennoch so wenig Resourcen wie möglich fressen?

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

Irgendwie habe ich das Gefühl, dass ihr nicht so richtig versteht was ich meine, deshalb hier noch eine ergänzende Erklärung.

Ich suche eine möglichkeit Text horizontal zu bewegen, aber eine die den Client Rechner nicht zu sehr belastet. Dazu brauche ich keine komplettlösung sondern eher ein wenig Brainstorming eurerseits. An folgende Möglichkeiten habe ich bereits gedacht:

1. Ein <input> Element in dem das ganze wie in diesem Beispiel bewegt wird: http://www.wendenburg.de/test/ticker_sub.html. Das läuft allerdings sehr langsam vor sich hin und läuft auch nicht flüssig.

2. Die breite des Textes auf 200% oder gar 300% des Bildschirms ausdehnen und in einem extra Framefenster (das soll sowieso unten vor sich hinlaufen) per scrollTo() verschieben. Dann müsste ich aber irgendwie die Scrollbalken ausschalten, damit das nicht so blöde aussieht, wenn ich die aber abschalte dann scrollt es damit nicht mehr. Hat da jemand noch eine Idee wie man das machen könnte?

Grüße
Jeena Paradies

[wahsaga]

hi,

2. Die breite des Textes auf 200% oder gar 300% des Bildschirms ausdehnen und in einem extra Framefenster (das soll sowieso unten vor sich hinlaufen) per scrollTo() verschieben. Dann müsste ich aber irgendwie die Scrollbalken ausschalten, damit das nicht so blöde aussieht, wenn ich die aber abschalte dann scrollt es damit nicht mehr. Hat da jemand noch eine Idee wie man das machen könnte?

Frame(-body) ohne Scrollbalken, darin ein Element mit fester Breite von 100%, und erst darin ein überbreites Element.
Wenn du das Element mit der festen Breite hoch genug bzw. den Frame klein genug machst, liegt der Scrollbalken dieses Elementes außerhalb des sichtbaren Bereiches im Frame.

gruß,
wahsaga

[Jeena Paradies]

Hallo,

Frame(-body) ohne Scrollbalken, darin ein Element mit fester Breite von 100%, und erst darin ein überbreites Element.
Wenn du das Element mit der festen Breite hoch genug bzw. den Frame klein genug machst, liegt der Scrollbalken dieses Elementes außerhalb des sichtbaren Bereiches im Frame.

Sehr gute Idee, ich glaube ich werde versuchen das so umzusetzen, oder falls das doch zu aufwendig ist das mit der monospace Schrift, wie es Christoph vorgeschlagen hatte, mal schauen.

Grüße
Jeena Paradies

[Felix Riesterer]

Lieber Jeena,

die Frames-Idee ist schon sehr gut, aber warum das ganze nicht in einem {overflow: hidden}-DIV machen? Das müsste sich doch auch "scrollen" lassen, auch wenn kein solcher Balken zu sehen ist, oder?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jeena Paradies]

Hallo,

die Frames-Idee ist schon sehr gut, aber warum das ganze nicht in einem {overflow: hidden}-DIV machen? Das müsste sich doch auch "scrollen" lassen, auch wenn kein solcher Balken zu sehen ist, oder?

Dadurch dass das unten angezeigt werden muss müsste ich dann hier ein position: fixed; nutzen, was meiner Erfahrung nach mehr resourcen zieht als ein eigenes Framefenster, oder hast du da andere Erfahrungen?

Grüße
Jeena Paradies

[wahsaga]

hi,

die Frames-Idee ist schon sehr gut, aber warum das ganze nicht in einem {overflow: hidden}-DIV machen? Das müsste sich doch auch "scrollen" lassen, auch wenn kein solcher Balken zu sehen ist, oder?

Na ja, scrollTo/scrollBy sind Methoden des window-Objektes, die kann man m.W. nicht auf andere Elemente anwenden.
Was denkbar wäre, ist ein div mit overflow:hidden, in dem an anderes Element mit fester Breite absolut positioniert und diese Position dann verändert wird.
Lösungen per clip() sind ebenfalls denkbar - aber das wird aufwendiger, und wenn Jeenas Hauptaugenmerk auf der Performance liegt, scheidet das vermutlich gleich wieder aus.

Dadurch dass das unten angezeigt werden muss müsste ich dann hier ein position: fixed; nutzen, was meiner Erfahrung nach mehr resourcen zieht als ein eigenes Framefenster, oder hast du da andere Erfahrungen?

Ich denke auch, dass so etwas in einem (i)frame am leichtesten für den browser zu handeln ist.
Beim (nicht transparenten) iframe weiß der Browser gleich, was er darzustellen - bei per position:fixed positioniertem Element muss er auch immer noch berechnen, ob evtl. dahinter liegender Inhalt durchscheint, etc.

gruß,
wahsaga

[Christoph Zurnieden]

Hi,

Ich suche nach der performantesten Methode einen Ticker in eine Seite einzubauen.

Hast Du ein Glück, das Du mir bekannt bist und ich annehmen kann, das Du weißt was Du tust ;-)

Den Anfang habe ich mir schon denke ich ganz gut überlegt. Die Tickerdaten liegen als Textdatei (oder XML Datei) auf dem Server. JavaScript fragt sie mittels XMLHttpRequest ab, dabei wird IfModifiedSince verwendet und wenn sich die daten seit der letzten Abfrage nicht verändert haben, dann wird einfach das gleiche noch einmal über den Bildschirm geschickt. Falls sich die Daten geändert haben werden die neuen Daten über den Bildschirm geschickt.

Ohgottohgottohgottohgott ...

So weit so gut.

Auslegungssache ;-)
Aber prinzipiell völlig in Ordnung, klar.

Wie bewege ich aber jetzt den Text von links nach rechts, so dass sie sich sosmoth wie möglich bewegen aber dennoch so wenig Resourcen wie möglich fressen?

Was bedeutet "smooth": pixelweise (1,5,10... Pixel/Hub) oder buchstabenweise? Je "weicher" die Bewegung sein soll, desto kleiner müssen natürlich die Sprünge sein, am besten 1 Pixel/Hub. Je höher die Geschwindigkeit des Bandes sein soll, desto öfter muß das Band versetzt werden. Geschwindigkeit ist Länge/Zeit und die Länge mißt Du in oben beschriebenem Pixel/Hub bzw Buchstaben/Hub. Auf- bzw Abrunden. Minimum suchen (Na, wie ging das noch? ;-). Implementation wie gewohnt.
Als einzige Optimierung wäre es zu empfehlen die Hübe zu desynchronisieren, d.h. wenn Du an mehreren Stellen Text verholen willst, dann ändere nicht nur die Länge sondern auch den Zeitpunkt. Damit ist die Last etwas verteilt. Ich glaube aber nicht, das es viel bringen wird.
Achso: nicht vergessen den XMLHttpRequest() asynchron und nichtblockierend auszuführen.

Und da ich es mir eh nicht verkneifen kann: der schnellste Prozeß ist stets der, der gar nicht erst ausgeführt wird ;-)

Ah, gut, wenn man vor dem Abschicken nochmal schaut:

1. Ein <input> Element in dem das ganze wie in diesem Beispiel bewegt wird: http://www.wendenburg.de/test/ticker_sub.html. Das läuft allerdings sehr langsam vor sich hin und läuft auch nicht flüssig.

Das ist ein typisches buchstabenweises Verschieben. Das kann rein optisch etwas hakeln wenn man keine Schrift mit konstanter Breite verwendet. Ansonsten ist der Ansatz gar nicht schlecht, da läßt sich nicht mehr viel in der Zeit optimieren, wahrscheinlich sogar gar nichts mehr: es ist die schnellste Methode.

so short

Christoph Zurnieden

[Jeena Paradies]

Hallo,

Hast Du ein Glück, das Du mir bekannt bist und ich annehmen kann, das Du weißt was Du tust ;-)

Das habe ich mir schon fast gedacht und mich schon gefragt warum hier kiene Diskussion über die sinnhaftigkeit vom Einsatz von Tickern und JavaScript angefangen wurde ;-).

Ohgottohgottohgottohgott ...

So weit so gut.
Auslegungssache ;-)
Aber prinzipiell völlig in Ordnung, klar.

Ich möchte so wenig Servertrafic wie möglich erzeugen, weil voraussichtlich die Nutzerzahlen sehr viel Anteigen werden. Die Daten können sich aber dennoch alle paar Minuten ändern und ich brauche immer die neuesten Informationen auf dem Bildschirm, deshalb muss immer wieder automatisch abgefragt werden. An den Rechnern gibt es keine Eingabegeräte, so dass das ganze automatisch funktionieren muss. Das erzeugt natürlich sehr viel Traffic, den ich zu minimieren versuche.

Was bedeutet "smooth"

So dass es in den Augen nicht weh tut und irgendwie professionell daherkommt.

Als einzige Optimierung wäre es zu empfehlen die Hübe zu desynchronisieren, d.h. wenn Du an mehreren Stellen Text verholen willst

Nein der Text wird nur an einer stelle angezeigt.

Achso: nicht vergessen den XMLHttpRequest() asynchron und nichtblockierend auszuführen.

Das verstehe ich wiederum nicht ganz, was meinst du damit?

Und da ich es mir eh nicht verkneifen kann: der schnellste Prozeß ist stets der, der gar nicht erst ausgeführt wird ;-)

Naja hm, was meinst du damit? Irgendwie muss ich die Informationen doch an den Mann bringen.

Das ist ein typisches buchstabenweises Verschieben. Das kann rein optisch etwas hakeln wenn man keine Schrift mit konstanter Breite verwendet. Ansonsten ist der Ansatz gar nicht schlecht, da läßt sich nicht mehr viel in der Zeit optimieren, wahrscheinlich sogar gar nichts mehr: es ist die schnellste Methode.

Aha das mit der Schrift lässt sich leicht machen, das ist eine interessante Idee. Ich probiere das dann mal aus. Bisher sah ich das nur in einer schrift die keine konstante Breite hatte und da sah es etwas komisch aus manchmal.

Grüße
Jeena Paradies

[Christoph Zurnieden]

Hi,

Was bedeutet "smooth"
So dass es in den Augen nicht weh tut und irgendwie professionell daherkommt.

Richtig gleitend wird das natürlich nur, wenn Du pixelweise verschiebst. Aber das kostet natürlich. Wenn die Ausgaberechner nicht allzu schwach auf der Brust sind, würde ich es mal probieren. Wenn auch erst, nachdem alles andere läuft.

Als einzige Optimierung wäre es zu empfehlen die Hübe zu desynchronisieren, d.h. wenn Du an mehreren Stellen Text verholen willst
Nein der Text wird nur an einer stelle angezeigt.

Nein, "verholen" meint "etwas verschieben", also wenn Du an mehreren Stellen Text verschieben möchtest, wie Du es im OP anklingen ließest.

Achso: nicht vergessen den XMLHttpRequest() asynchron und nichtblockierend auszuführen.
Das verstehe ich wiederum nicht ganz, was meinst du damit?

Wenn man jetzt auf das passende Kapitel in SELFHTML verweisen könnte ... ;-)
Beim Mozilla z.B.:http://www.xulplanet.com/references/objref/XMLHttpRequest.html#method_openRequest

Und da ich es mir eh nicht verkneifen kann: der schnellste Prozeß ist stets der, der gar nicht erst ausgeführt wird ;-)
Naja hm, was meinst du damit? Irgendwie muss ich die Informationen doch an den Mann bringen.

Ach komm: der kleine Scherz sei mir doch erlaubt, oder? ;-)

Aha das mit der Schrift lässt sich leicht machen, das ist eine interessante Idee. Ich probiere das dann mal aus. Bisher sah ich das nur in einer schrift die keine konstante Breite hatte und da sah es etwas komisch aus manchmal.

Wenn Du den Takt etwas reduzierst, alles etwas langsamer machst, sieht es auch ein klein wenig besser aus. Einfach mal probieren.

so short

Christoph Zurnieden

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Ich suche nach der performantesten Methode einen Ticker in eine Seite einzubauen.

Wer zwingt dich zu sowas und warum kann man in dem Fall kein RSS verwenden?

Gruß
Alexander Brock

[Jeena Paradies]

Hallo,

Wer zwingt dich zu sowas und warum kann man in dem Fall kein RSS verwenden?

Ähm wieso jetzt RSS? In welchem Format die Daten vorliegen ist ja wurst, ich muss sie nur anzeigen.

Es geht darum Live Ergebnisse anzuzeigen und zusätzlich die letzten 10 Ergebnisse, die sich verändert haben an einer anderen Stelle anzuzeigen. Das ganze wird in Terminals ohne Eingabegeräte verwendet, es gibt also keine Maus zum Scrollen und auch keine Tastatur. Es gibt aber sehr viele Daten, die nicht auf einmal übersichtlich auf dem Bildschirm platz haben. Deshalb muss automatisch gescrollt werden und nachdem alles durchlaufen ist muss abgefragt werden ob sich die ergebnisse geändert haben, falls ja werden die neuen angefordert falls nein, werden die alten noch mal auf die Reise geschickt, das ist alles.

Grüße
Jeena Paradies

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Hallo,

Wer zwingt dich zu sowas und warum kann man in dem Fall kein RSS verwenden?
Ähm wieso jetzt RSS? In welchem Format die Daten vorliegen ist ja wurst, ich muss sie nur anzeigen.

Ich meinte, du könntest die Informationen als RSS anbieten,
das können gewöhnliche RSS-Reader (oder Mailclients)
auslesen und die neuen Ergebnisse anzeigen,
ohne dass du JS verwenden musst.

Das ganze wird in Terminals ohne Eingabegeräte verwendet, es gibt also keine Maus zum Scrollen und auch keine Tastatur.

Das ist die entscheidende Information, die im Ursprungsposting gefehlt hat.

Gruß
Alexander Brock