JS Geschwindigkeit und Timer in Objekten

Hallo,

ich habe eine kleine Seite gebaut:

http://h1409875.stratoserver.net/test/

Die Bilder werden alle per JS platziert bzw. eingeblendet, auf Klick
auf ein Bild erscheint das nächste aus der Serie.
Alle Bilder liegen sortiert in einzelnen Verzeichnissen - die Anzahl
und Bildnamen aus den Verzeichnissen hole ich per HTTP-Request und
lese mit PHP das jeweilige Verzeichnis aus.

Folgende Probleme habe ich aber noch:

Zum einen wollte ich eigentlich, dass sich die Bilder beim Start der
Seite nacheinanden einblenden - momentan kommen alle zur gleichen
Zeit. Ich benötige also einen Timer, der entweder die einzelnen
Objekte zeitversetzt erzeugt, oder was mir noch lieber wäre - im
Objekt in der init()-Funktion wird die Funktion showCurrentFile
zeitversetzt gestartet.

Ich habe hier schon folgendes Versucht - im Objekt, innerhalb der init
():

me.timeOut = window.setTimeout(function() { me.showCurrentFile(ID); },
100);

Aber die setTimeOut-Funktion greift hier gar nicht.

Zum anderen macht der IE Probleme mit der Geschwindigkeit bei der
Startseite - das Einblenden der Bilder ganz Bild für Bild
nachvollzogen werden, Zeile für Zeile - das sieht nicht so gut aus.

GIbt es hier ein paar Hinweise, wie ich das noch optimieren kann?

Danke schonmal

Günter.

Guenter Baier schrieb am 05.10.2009 01:21:

ich habe eine kleine Seite gebaut:

http://h1409875.stratoserver.net/test/

Die Bilder werden alle per JS platziert bzw. eingeblendet, auf Klick
auf ein Bild erscheint das nächste aus der Serie.
Alle Bilder liegen sortiert in einzelnen Verzeichnissen - die Anzahl
und Bildnamen aus den Verzeichnissen hole ich per HTTP-Request und
lese mit PHP das jeweilige Verzeichnis aus.

Folgende Probleme habe ich aber noch:

Zum einen wollte ich eigentlich, dass sich die Bilder beim Start der
Seite nacheinanden einblenden - momentan kommen alle zur gleichen
Zeit. Ich benötige also einen Timer, der entweder die einzelnen
Objekte zeitversetzt erzeugt, oder was mir noch lieber wäre - im
Objekt in der init()-Funktion wird die Funktion showCurrentFile
zeitversetzt gestartet.

Ich habe hier schon folgendes Versucht - im Objekt, innerhalb der init
():

me.timeOut = window.setTimeout(function() { me.showCurrentFile(ID); },
100);

Aber die setTimeOut-Funktion greift hier gar nicht.

Woraus schließt du das? 100 ms sind nicht viel. Und ob deine Funktion
showCurrentFile jetzt 20 mal sofort aufgerufen wird, oder nach 100 ms 20
mal aufgerufen wird, ist wahrscheinlich nicht sichtbar.

Zum anderen macht der IE Probleme mit der Geschwindigkeit bei der
Startseite - das Einblenden der Bilder ganz Bild für Bild
nachvollzogen werden, Zeile für Zeile - das sieht nicht so gut aus.

GIbt es hier ein paar Hinweise, wie ich das noch optimieren kann?

eval ist böse und torpediert die modernen JIT-Compiler der modernen Browser.

--
Mit freundlichen Grüßen
Holger Jeromin

*Guenter Baier* wrote on Mon, 09-10-05 01:21:

Die Bilder werden alle per JS platziert bzw. eingeblendet, auf Klick auf
ein Bild erscheint das nächste aus der Serie.

Du möchtest also, daß erwachsene intelligente Besucher nur eine leere
Seite zu sehen bekommen. Irgend ein Grund, warum die das nicht sehen
sollen?

Guenter Baier wrote:

Hallo,

ich habe eine kleine Seite gebaut:

http://h1409875.stratoserver.net/test/

Die Bilder werden alle per JS platziert bzw. eingeblendet, auf Klick
auf ein Bild erscheint das nächste aus der Serie.
Alle Bilder liegen sortiert in einzelnen Verzeichnissen - die Anzahl
und Bildnamen aus den Verzeichnissen hole ich per HTTP-Request und
lese mit PHP das jeweilige Verzeichnis aus.

Folgende Probleme habe ich aber noch:

Zum einen wollte ich eigentlich, dass sich die Bilder beim Start der
Seite nacheinanden einblenden - momentan kommen alle zur gleichen
Zeit.

Kein Wunder, die Bilder sind ja auch Hintergrundbilder und werden

Sie werden übrigens von keiner mir bekannten Suchmaschine gefunden, und
Benutzer ohne Grafikdarstellung im Browser gucken auch in die Röhre (kein
Alternativtext, kein Link).

Ich benötige also einen Timer, der entweder die einzelnen
Objekte zeitversetzt erzeugt,

Nein, Du benötigst einfach nur IMG-Elemente statt dieses Hintergrundmülls.

oder was mir noch lieber wäre - im
Objekt in der init()-Funktion wird die Funktion showCurrentFile
zeitversetzt gestartet.

Du hast es zwar geschafft (ohne Angabe des Urhebers und ohne vorher meine
Erlaubnis einzuholen) meinen Code (fast wortwörtlich) auf jener
kommerziellen Website zu verwursten, aber OOP in ECMAScript hast Du noch
nicht verstanden. Was soll das für ein Unfug sein, eine Prototyp-Methode
namens `init' aufzurufen, nur um dann eine Prototyp-Eigenschaft namens
`constructor' zu verwenden, um den Konstruktor aufzurufen?

Benenn (aus Konvention) `imgObject' in `ImgObject' um, und ergänz den
Konstruktor mit dem Rest von init(). Dann entsorg init() ganz und mach
nicht groben Unfug wie

eval("var div_ID_"+i+" = new imgObject();");
eval("div_ID_"+i).init(i);

sondern

o["div_ID_" + i] = new ImgObject(i);

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist.

Ich habe hier schon folgendes Versucht - im Objekt, innerhalb der init
():

me.timeOut = window.setTimeout(function() { me.showCurrentFile(ID); },
100);

Aber die setTimeOut-Funktion greift hier gar nicht.

Muss wohl an dem eval-Müll liegen:

Zum anderen macht der IE Probleme mit der Geschwindigkeit bei der
Startseite - das Einblenden der Bilder ganz Bild für Bild
nachvollzogen werden, Zeile für Zeile - das sieht nicht so gut aus.

GIbt es hier ein paar Hinweise, wie ich das noch optimieren kann?

Danke schonmal

Günter.

[Supersedes wegen versehentlichem Absenden]

Guenter Baier wrote:

ich habe eine kleine Seite gebaut:

http://h1409875.stratoserver.net/test/

Die Bilder werden alle per JS platziert bzw. eingeblendet, auf Klick
auf ein Bild erscheint das nächste aus der Serie.
Alle Bilder liegen sortiert in einzelnen Verzeichnissen - die Anzahl
und Bildnamen aus den Verzeichnissen hole ich per HTTP-Request und
lese mit PHP das jeweilige Verzeichnis aus.

Folgende Probleme habe ich aber noch:

Zum einen wollte ich eigentlich, dass sich die Bilder beim Start der
Seite nacheinanden einblenden - momentan kommen alle zur gleichen
Zeit.

Kein Wunder, die Bilder sind ja auch alle Hintergrundbilder.

Sie werden übrigens von keiner mir bekannten Suchmaschine gefunden werden,
und Benutzer ohne Grafikdarstellung im Browser gucken auch in die Röhre
(kein Alternativtext, kein Link).

Ich benötige also einen Timer, der entweder die einzelnen
Objekte zeitversetzt erzeugt,

Nein, Du benötigst einfach nur IMG-Elemente statt dieses Hintergrundmülls.

oder was mir noch lieber wäre - im
Objekt in der init()-Funktion wird die Funktion showCurrentFile
zeitversetzt gestartet.

Du hast es zwar geschafft (unverschämterweise ohne Angabe des Urhebers und
ohne vorher meine Erlaubnis einzuholen) meinen Code (fast wortwörtlich)¹ auf
jener kommerziellen Website zu verwursten ("verwenden" kann man das nicht
wirklich nennen), aber OOP in ECMAScript hast Du noch immer nicht
verstanden.

Was soll das für ein Unfug sein, eine Prototyp-Methode namens `init'
aufzurufen, nur um dann darin eine Prototyp-Eigenschaft namens `constructor'
zu verwenden, um den Konstruktor aufzurufen?

Benenn (aus Konvention) `imgObject' in `ImgObject' um, und ergänz den
Konstruktor mit dem Rest von init(). Dann entsorg init() ganz und mach
nicht groben Unfug wie

eval("var div_ID_"+i+" = new imgObject();");
eval("div_ID_"+i).init(i);

sondern

o["div_ID_" + i] = new ImgObject(i);

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist. Schon
werden es auch ein paar globale Variablen(!) weniger.

Ohne mindestens diese Anpassung werde ich die Verwendung meines Codes auf
dieser Website übrigens nicht nachträglich autorisieren.

________
¹ siehe <news:4745DA54.3090309 (AT) PointedEars (DOT) de> bzw.
<http://groups.google.de/group/de.comp.lang.javascript/msg/d35e013bdaba411d?hl=de&dmode=source>

Ich habe hier schon folgendes Versucht - im Objekt, innerhalb der init
():

me.timeOut = window.setTimeout(function() { me.showCurrentFile(ID); },
100);

Aber die setTimeOut-Funktion greift hier gar nicht.

Unwahrscheinlich, aber bei dem eval-Müll kann man nie wissen. Ersetz

this.images = eval("new Array("+me.requestFile(ID)+")");

z.B. durch

this.images = Array.apply([], me.requestFile(ID).split(/\s*,\s*));

Zum anderen macht der IE Probleme mit der Geschwindigkeit bei der
Startseite - das Einblenden der Bilder ganz Bild für Bild
nachvollzogen werden, Zeile für Zeile - das sieht nicht so gut aus.

Parse error.

GIbt es hier ein paar Hinweise, wie ich das noch optimieren kann?

Möglicherweise. Zuvor sind von Dir aber ganz andere Probleme zu lösen!


PointedEars

Holger Jeromin wrote:

Guenter Baier schrieb am 05.10.2009 01:21:
GIbt es hier ein paar Hinweise, wie ich das noch optimieren kann?

eval ist böse

Ja, weil fehlerträchtig und ineffizient. Es gibt zwar sinnvolle
Anwendungen, diese hier gehört aber nicht dazu.

und torpediert die modernen JIT-Compiler der modernen Browser.

Das mag ich bedreifeln. Per Spezifikation löst eval() nur die Ausführung
des String-Arguments als ECMAScript /Program/ aus, und mitunter findet JIT-
Compilation komponentenweise (z.B. Funktionen/Methoden nur bei Aufruf)
statt.


PointedEars

Hallo,

danke erstmal für die Hinweise - das mit den Hintergrund-Bildern ist
ein Argument ... werde ich ändern.

@PointedEars - mhh, soweit ich mich erinnere, stand (ein Teil
zumindest ?) der Code auch hier mit
in der NG, dann frage ich mal an dieser Stelle höflich nach der
Verwendung ...

Du hast durchaus recht, wenn ich da sicher einige Sachen noch nicht
richtig verstanden habe, aber
dafür frage ich ja nach ;-)

Hab auch seitenweise Google gewälzt (vermutlich die falschen Seiten)
aber was wirklich für mich
(Betonug "mich") nachvollziehbares nicht gefunden - liegt also eher an
mir.

Günter

Guenter Baier wrote:

danke erstmal für die Hinweise - das mit den Hintergrund-Bildern ist
ein Argument ... werde ich ändern.

Gut.

@PointedEars - mhh, soweit ich mich erinnere, stand (ein Teil
zumindest ?) der Code auch hier mit in der NG, dann frage ich mal an
dieser Stelle höflich nach der Verwendung ...

Quelltext, der veröffentlicht wurde, gehört _nicht_ automatisch jedem (ist
_nicht_ "public domain"). Ohne weitere Angaben gilt das Urheberrecht.

Aus diesem Grund veröffentliche ich den überwiegenden Teil meines
Quelltextes bislang explizit unter der GNU GPL v2 und neuer. Diese erlaubt
die Weiterverwendung, Veränderung und Verbreitung unter bestimmten
Umständen, wenn der Urheber genannt bleibt. Das trifft jedoch für diesen
speziellen Quelltext aus gutem Grund nicht zu.

<http://de.wikipedia.org/wiki/Berner_%C3%9Cbereinkunft_zum_Schutz_von_Werken_der _Literatur_und_Kunst>
<http://de.wikipedia.org/wiki/Deutsches_Urheberrecht>

Die Chancen stehen aber nicht schlecht, dass eine verbesserte Version von
<http://pointedears.de/scripts/httprequest.js> in nicht allzu ferner Zukunft
unter GNU GPL v3 veröffentlicht werden wird.

Hab auch seitenweise Google gewälzt (vermutlich die falschen Seiten)
aber was wirklich für mich (Betonug "mich") nachvollziehbares nicht
gefunden - liegt also eher an mir.

Ja, Eigenschaftszugriffe und Vermeidung von eval() haben wir schon ad
nauseam hier und woanders diskutiert. Die FAQ von comp.lang.javascript
widmet dem sogar einen eigenen Punkt. (Bei "unserer" FAQ bin ich mir gerade
nicht sicher.)


PointedEars

On 5 Okt., 20:50, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

nicht groben Unfug wie

* eval("var div_ID_"+i+" = new imgObject();");
* eval("div_ID_"+i).init(i);

sondern

* o["div_ID_" + i] = new ImgObject(i);

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist. *Schon
werden es auch ein paar globale Variablen(!) weniger.

Ok - zum Thema Objekt halte ich mich zumindest was das
belesen angeht momentan daran:

http://www.peterkropff.de/site/javascript/referenzierung.htm

Nun verstehe ich schon nicht:

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist.

das heisst 'o' ist vorher schein einmal mit einem 'new irgendwas()'
instanziert worden und wird nun mit

o["div_ID_" + i] = new ImgObject(i);

noch einmal ein Objekt?

Und das Ansprechen mit eckigen Klammern ist hier beschrieben?

http://www.peterkropff.de/site/javascript/literalobjekte_1.htm

Wobei ich auch hier wie immer lese und aber keine "MIR"
verständlichen
Beispiele finde.

Oder ist gar diese Quelle auch eher "nicht so gut"?

Günter

Guenter Baier wrote:

Thomas 'PointedEars' Lahn wrote:
nicht groben Unfug wie

eval("var div_ID_"+i+" = new imgObject();");
eval("div_ID_"+i).init(i);

sondern

o["div_ID_" + i] = new ImgObject(i);

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist. Schon
werden es auch ein paar globale Variablen(!) weniger.

Ok - zum Thema Objekt halte ich mich zumindest was das
belesen angeht momentan daran:

http://www.peterkropff.de/site/javascript/referenzierung.htm

Ach Du mein Schreck! Da ist ja sogar SELFHTML noch besser.
Wundert mich nicht mehr so, dass Du so nicht vorwärtskommst.

Nun verstehe ich schon nicht:

wobei `o' eine Referenz auf ein benutzerdefiniertes Objekt ist.

das heisst 'o' ist vorher schein einmal mit einem 'new irgendwas()'
instanziert worden

Ja.

/* a) */
var o = {};

ist äquivalent zu

/* b) */
var o = new Object();

Das Object-Literal (a) -- bzw. genauer lt. Spezifikation der Object-
Initialisierer -- hat gegenüber dem expliziten Konstruktoraufruf (b) den
Vorteil, dass im selben Objekteigenschaften hingezufügt und
(notwendigerweise) initialisiert werden können; jedoch ist es erst später
der Spezifikation (ECMAScript Ed. 3: 1999/2000) und Implementationen
(JScript/JavaScript, ab 1997/1998) hinzugefügt worden und ist daher nicht
abwärtskompatibel. (Inzwischen dürfen jedoch die Implementationen, die es
nicht unterstützen, als obsolet betrachtet werden, weil Entwicklung und
Support für die Benutzerprogramme, welche nur diese Versionen unterstützten,
schon vor Jahren eingestellt wurden. CMIIW.)

Siehe auch <http://PointedEars.de/es-matrix> (das nächste Release wird
Verwendungsempfehlungen zu jedem Feature aufgrund meiner Testergebnisse und
der hier und in comp.lang.javascript geführten Diskussionen beinhalten).

und wird nun mit

o["div_ID_" + i] = new ImgObject(i);

noch einmal ein Objekt?

Jein. Mit dieser Zuweisung ist/wird "div_id_" + i der Name einer
Eigenschaft dieses ersten, benutzerdefinierten Objekts (hier mit `o'
referenziert).

`['...`]' ist hier eine mögliche Eigenschaftszugriffsyntax (die andere
ist der `.'). Die Klammersyntax hat gegenüber der Punktsyntax den
Vorteil, dass der Eigenschaftsname ein beliebiger Ausdruck sein kann,
der für den Eigenschaftszugriff zu String konvertiert wird. (Alle
Eigenschaftsnamen sind Zeichenfolgen. Bei NodeLists und HTMLCollections
des W3C-DOM ist die Klammersyntax auch die einzige zulässige
Kurzschreibweise, z.B. document.forms[0].elements["bar"] ===
document.forms.item(0).namedItem("bar").)

Die Klammersyntax findet sich auch beim Zugriff auf Array-Elemente
wieder, wodurch klar wird, dass Array-Elemente auch nur spezielle
(numerische) Eigenschaften einer Array-Instanz sind: a[1] === a["1"].
Sie ist aber nicht zu verwechseln mit einem Array-Literal bzw.
-Initialisierer, welches/-r selbst eine Referenz auf eine neue Array
Instanz -- also [fast] so als ob mit new Array(...) erstellt --
darstellt: `[]', `["a", 42]' usw. Erkennen kann man Array
Initialisierer daran, dass vor ihnen kein Bezeichner und kein
Eigenschaftszugriff steht.

Dieser (ggf. neuen) Eigenschaft wird nun als Wert eine Referenz auf eine
ImgObjekt-Instanz zugewiesen (Referenzen sind Werte!), d.h. oberflächlich
betrachtet wird das eine Objekt "Teil" des anderen Objekts und das erste
Objekt somit eine Art "Container" für Objekte (Aggregation). Wichtig ist
hier, dass es jetzt im Unterschied zu Deinem Ansatz nur noch eine globale
Variable gibt, nämlich `o', mit der dieses Container-Objekt referenziert
werden kann.

Und das Ansprechen mit eckigen Klammern ist hier beschrieben?

Nein.

http://www.peterkropff.de/site/javascript/literalobjekte_1.htm

"Literal-Objekt" -- grober Unfug! (siehe oben)

Wobei ich auch hier wie immer lese und aber keine "MIR"
verständlichen Beispiele finde.

Da steht ja auch nur Müll wie "ausserhalb des Objektkontextes".

Oder ist gar diese Quelle auch eher "nicht so gut"?

Äh, ja. Wie 90%+ aller "JavaScript-Anleitungen" in Web und Büchern.

Lies doch einfach die gängigen Referenzen: ECMAScript-Spezifikation (dort
steht, wie es funktionieren sollte und meist auch funktioniert), MDC
(JavaScript und Gecko-DOM), MSDN (JScript und MSHTML-DOM), und diverse
andere Browserhersteller-Sites (Opera, Apple Developer Connection für
Safari/WebKit u.a.)


PointedEars