Leistung der Einstellung img src auf unveränderten Wert?

Wenn ich einen img-Tag wieLeistung der Einstellung img src auf unveränderten Wert?

<img src="example.png" />

und ich stelle es über

myImg.src = "example.png";

auf den gleichen Wert wieder, wird dies ein no-op, oder wird Browser unnötig das Bild neu zu zeichnen? (Ich interessiere mich hauptsächlich für das Verhalten von IE6-8, FF3.x, Safari 4-5 und Chrome.)

Ich muss viele (hunderte von) Bilder auf einmal ändern und das src-Attribut manuell vergleichen ein bisschen überflüssig sein - wie ich annehme, dass der Browser das schon für mich macht?

Quelle

2010-08-28 Chris Lercher

Wie groß sind die Bilder (in Bezug auf die Downloadgröße)? Wie oft werden Sie die Src-Eigenschaft ändern? – Tim

@Tim: Die Bilder sind klein in der Download-Größe (sie sind nur Statussymbole) - aber es wird in der Regel keinen Download geben, da sie meist schon zwischengespeichert sind. Die Bilder werden in einem Stapel ausgetauscht, wenn der Benutzer eine bestimmte Aktion ausführt - das Update sollte dann so schnell wie möglich sein. –

Gehen Sie nicht davon aus, dass der Browser das für Sie erledigt. Ich arbeite an einem Projekt ähnlicher Größenordnung, das Hunderte von (dynamisch geladenen) Bildern erfordert, wobei Geschwindigkeit oberste Priorität hat.

Caching der "src" -Eigenschaft jedes Elements wird dringend empfohlen. Es ist teuer zu lesen und setzen Hunderte von DOM-Element Eigenschaften und sogar Einstellung src auf den gleichen Wert kann dazu führen, Reflow oder Malen Ereignisse.

[Bearbeiten] Die Mehrheit der Schwerfälligkeit in der Schnittstelle war aufgrund all meiner Schleifen und Prozesse. Sobald diese optimiert waren, war die Benutzeroberfläche sehr flüssig, selbst wenn Hunderte von Bildern kontinuierlich geladen wurden.

[Bearbeiten 2] Angesichts Ihrer zusätzlichen Informationen (die Bilder sind alle kleine Statussymbole), sollten Sie vielleicht einfach eine Klasse für jeden Status in Ihrem CSS deklarieren. Vielleicht möchten Sie auch mit cloneNode und replaceNode für einen sehr schnellen und effizienten Austausch suchen.

[Bearbeiten 3] Versuchen Sie absolut-Positionierung Ihrer Bildelemente. Es wird die Menge an Reflow begrenzen, die passieren muss, da absolut positionierte Elemente außerhalb des Flusses liegen.

Quelle

2010-08-28 21:36:02 Tim

Um genauer zu sein: Es ist teuer, auf Hunderte von ** DOM-Elementen ** in JavaScript zuzugreifen, das ist immer noch der Engpass vieler Programme. –

Sehr wahr; Ich habe die Antwort aktualisiert. – Tim

@Tim: Danke, sehr interessant! Ich habe darüber nachgedacht, die src -Eigenschaft zwischenzuspeichern (oder in meinem Fall: eine ganze Zahl zu verwenden, um sich an den Zustand zu erinnern) - ich würde es lieber vermeiden (es ist zusätzliche Komplexität), aber wenn es stimmt, kann das Setzen des src auf einen unveränderten Wert verursachen ein ** Reflow **, dann werde ich es definitiv tun. Bist du dir sicher über den Reflow? –

Wenn Sie mehrere Elemente gleichzeitig ändern, blockieren Sie normalerweise den UIhread ohnehin, sodass nur ein Neuaufbau nach dem Abschluss des JavaScript-Vorgangs erfolgt, was bedeutet, dass das Neuzeichnen pro Image wirklich kein Faktor ist.

Ich würde hier nichts überprüfen, lassen Sie den Browser kümmern, die neuen sind schlau genug, um dies auf effiziente Weise zu tun (und es war nie wirklich so ein Problem, wie auch immer).

Der Fall sehen Sie hier ist es, neue Bilder Laden und wieder fließen die Seite, wie sie laden, die ist, was hier teuer ist, vorhandene Bilder sehr gering im Vergleich zu diesen Kosten sind.

Quelle

2010-08-28 21:27:14

@Marcel - Nö ... "dp" hätte "geladen" werden sollen, nicht wirklich sicher wie ich das FUBARed habe ... danke für den Fang aber! –

Ich empfehle die Verwendung von CSS Sprite-Technik. Weitere Informationen unter: http://www.alistapart.com/articles/

Sie können ein Bild verwenden, das alle Symbole enthält. Anstatt das src-Attribut zu ändern, aktualisieren Sie die Hintergrundeigenschaft.

Quelle

2010-08-28 22:18:16 Zafer

@Zafer: Danke für den Vorschlag. Leider kann ich das nicht verwenden, da Hintergrundbilder nicht skaliert werden, wenn der Benutzer eine Textgröße ändert (die Bilder müssen immer genau 1 m Höhe haben). Hintergrundbilder können in keiner Weise skaliert werden (mit CSS 2.1). –

@chris - Nicht wahr, zumindest nicht in Firefox 3.6.8; Die Pfeilbilder auf dieser Seite * sind * Hintergrundbilder und skalieren beim Ein- und Auszoomen. –

@Marcel: Ein Seitenzoom vergrößert natürlich alles. Aber aktivieren Sie die Option "Ansicht -> Zoom -> Nur Text zoomen". Einige Benutzer haben diese Option aktiviert (und bei einigen Browsern ist dies der Standard). –

Leistung der Einstellung img src auf unveränderten Wert?

Antwort

Verwandte Themen