<object>-tag oder <div>-tag oder <img>-Tag

[mb]

Guten Tag Liebe Community,

Erklärung: Ich hab ne Frage zu den grafischen Elementen die ein Bild oder repitierte Bilder erzeugen. Ich habe per JavaScript mit Community Hinweisen ein animiertes Element erzeugt was sich komplett über das Anzeigefenster erstreckt. Ich habe unterschiedliche Methoden verwendet. Sie grafik ist immer ein pixel^2 groß.

• Image-<object> Bildwechsel über setAttributzeNode() des data-Attribut,

• <div>-Tag Bildwechsel mit css-Attribut: background mit repeat,

• <img>-Element Bildwechsel

bei <div>-element wo ich das 1pixelGrafik als background-Image repitiert habe ist das resultat unterschiedlich, wie bei <object> und <img> wo ich die Grafik einfach gestreckt habe über den anzegebereich.

Frage: Welches der drei methoden kommt der JS-Parser besser zurecht und frisst weniger resourcen und erzeugt glatte übergänge? Ich mein bei CSS Deklaration Background muss JS- oder HTML-Parser ja diesen einen Pixel für die gaze anzeigefläche wiederholen und das n bruchteil einer sekunde.

Liebe Grüße mb

[1unitedpower]

Frage: Welches der drei methoden kommt der JS-Parser besser zurecht und frisst weniger resourcen und erzeugt glatte übergänge?

Du machst dir im Vorfeld zu viele Gedanken über Performance. In der Webentwicklung ist es nützlich eine Top-Down-Perspektive zu Effizienz einzunehmen, d.h. du schreibst deinen Code erst mal möglichst sauber und elegant runter. Erst anschließend prüfst du werkzeuggesetützt^[1] ob und wo sich die Flaschenhälse in deinem Code befinden, dann kannst du gezielt und wirkungsvoll optimieren.

Ich mein bei CSS Deklaration Background muss JS- oder HTML-Parser ja diesen einen Pixel für die gaze anzeigefläche wiederholen und das n bruchteil einer sekunde.

Das darfst du der Rendering-Engine der Browser gewiss zutrauen.

---

1. Chrome hat bspw. sogenannte Profiler in den Entwicklertools enthalten. ↩︎

[mb]

Du machst dir im Vorfeld zu viele Gedanken über Performance. In der Webentwicklung ist es nützlich eine Top-Down-Perspektive zu Effizienz einzunehmen, d.h. du schreibst deinen Code erst mal möglichst sauber und elegant runter. Erst anschließend prüfst du werkzeuggesetützt[^1] ob und wo sich die Flaschenhälse in deinem Code befinden, dann kannst du gezielt und wirkungsvoll optimieren.

Besten Dank für die präziese AW. Frage: was ist ein Falschenhals und Top-Down-Perspektive

Das darfst du der Rendering-Engine der Browser gewiss zutrauen.

Mein damaliger browser hat probleme gemacht. ich hab da mathematische funktionen höheren Grades in ein koordnatensystem transformiert und die punkte interpoliert :/. aber das ist n jahr her. auf jeden fall danke schön Gruß mb

[Laber Rhabarber]

• Image-<object> Bildwechsel über setAttributzeNode() des data-Attribut,

• <div>-Tag Bildwechsel mit css-Attribut: background mit repeat,

• <img>-Element Bildwechsel

bei <div>-element wo ich das 1pixelGrafik als background-Image repitiert habe ist das resultat unterschiedlich,

Unterschiedlich wozu? Stottert die Animation in sich oder verhält sie sich bei jedem Seitenaufruf anders? Oder in jedem Browser? Oder zu

bei <object> und <img> wo ich die Grafik einfach gestreckt habe über den anzegebereich.

? In letzterem Falle wäre deine Frage teilweise schon beantwortet.

Frage: Welches der drei methoden kommt der JS-Parser besser zurecht

Ich mein bei CSS-Deklaration Background muss JS- oder HTML-Parser ja diesen einen Pixel für die gaze anzeigefläche wiederholen

Die Kachelei übernimmt nicht der JS-Parser und schon gar nicht der HTML-Parser, sondern die Komponente im Browser, die für die Grafikdarstellung zuständig ist.

Das jedoch nur nebenbei, denn allgemein lässt sich deine Frage nicht beantworten. Die Aufgaben lassen sich unterschiedlich händeln, schon rein programmatisch und es kommt noch die Möglichkeit hinzu, die Arbeit der Grafikhardware zu überlassen. Entsprechend unterschiedliche Ergebnisse können sich von Browser zu Browser einstellen.

Es ist auch das Seitenumfeld zu beachten (HTML-Elemente beeinflussen sich gegenseitig) und dann hast du obendrein noch den Sonderfall einer 1-Pixel-Grafik, die nicht gestreckt oder wiederholt werden muss – es reicht, kurzerhand die ganze Fläche entsprechend einzufärben. Auch hier kann es wieder zu unterschiedlichen Handlungsweisen zwischen den Browsers kommen.

In dieser Richtung ist das also viel Stochern im Nebel, viel Spekulation und somit vergebene Liebesmüh'. Im dümmsten Falle verschlimmbesserst du die Situation nur. Ich würde mich daher von der Logik leiten lassen, also der Frage, ob es ein Bild sein soll (<img>) oder nur dekoratives Beiwerk (background).

Falls du nach einer Optimierung suchst und es bei der 1-Pixel-Grafik bleiben soll, rate ich dir, die Grafik in die Tonne zu treten und stattdessen einfach die gewünschte Farbe per background-color zu benennen. Damit fallen sämtliche Arbeiten zum Laden und Dekodieren der Grafik sowie zum Anpassen (Streckung bzw. Wiederholung) weg. Freundlicherweise lässt sich background-color auch noch CSS-seitig animieren, du bräuchtest also gar kein Javascript und hättest die Gewissheit, dass der Browser tut, was er kann, um eine möglichst gute Animation zu erreichen.

[mb]

Die Kachelei übernimmt nicht der JS-Parser und schon gar nicht der HTML-Parser, sondern die Komponente im Browser, die für die Grafikdarstellung zuständig ist.

Wusste ich nicht. Dank für deinen Beitrag

Es ist auch das Seitenumfeld zu beachten (HTML-Elemente beeinflussen sich gegenseitig) und dann hast du obendrein noch den Sonderfall einer 1-Pixel-Grafik, die nicht gestreckt oder wiederholt werden muss – es reicht, kurzerhand die ganze Fläche entsprechend einzufärben. Auch hier kann es wieder zu unterschiedlichen Handlungsweisen zwischen den Browsers kommen.

Ich muss dazu sagen das CSS-opacity nicht verwenden will und ich stattdessen 1 pixel-Grafik PNG - was ja transparenz unterstützt - genommen habe jedes Bild bisschen mehr transparenz bis null und dann css-display: none. Den Vorschlag einfach nen CSS-BackgroundColor zunehmen hatte man mir vorab geraten was füür mich keineswegs zielorientiert ist.

Ich würde mich daher von der Logik leiten lassen, also der Frage, ob es ein Bild sein soll (<img>) oder nur dekoratives Beiwerk (background).

schönen Gruß mb

[Laber Rhabarber]

Ich muss dazu sagen das CSS-opacity nicht verwenden will und ich stattdessen 1 pixel-Grafik PNG - was ja transparenz unterstützt - genommen habe jedes Bild bisschen mehr transparenz bis null und dann css-display: none. Den Vorschlag einfach nen CSS-BackgroundColor zunehmen hatte man mir vorab geraten was füür mich keineswegs zielorientiert ist.

Praktisch alle halbwegs aktuellen Browser unterstützen opacity (siehe http://caniuse.com/#feat=css-opacity) wie auch die Farbangabe RGBA (http://caniuse.com/#search=rgba), zudem überschneidet sich die Unterstützung mit jener des Alphakanals bei PNG (http://caniuse.com/#search=png). Selbst dem hinsichtlich der Leistung idealen Weg, die komplette Animation per CSS dem Browser zu überlassen, würde ich mit etwas gutem Willen schon breite Unterstützung zugestehen (http://caniuse.com/#feat=css-animation).

Insofern erscheint mir deine Wahl, mittels etlicher teiltransparenter Grafiken zu tricksen, fragwürdig; ich sehe da keinen Vorteil und du selbst fürchtest ja offenkundig die Nachteile. Aber du wirst deine Gründe haben – wer keine Arbeit hat, macht sich welche.

[mb]

Insofern erscheint mir deine Wahl, mittels etlicher teiltransparenter Grafiken zu tricksen, fragwürdig; ich sehe da keinen Vorteil und du selbst fürchtest ja offenkundig die Nachteile. Aber du wirst deine Gründe haben.

Es ist ein Projekt für ältere browser aber keine dinosaurier Browser. Ich will keine browserweisen verwenden darum habe ich mir zum ziel gemacht EINE browserweiche zu installieren für ältere und für aktuelle. html 4.1, css 2.1, javascript 1.5 und eben html 5, css 3. schöne Abend gruß Mb

[Matthias Apsel]

Hallo mb,

[…] EINE browserweiche zu installieren für ältere, [aber keine dinosaurier] und für aktuelle […]

• html 4.1, css 2.1, javascript 1.5

• html 5, css 3

[Umstellungen von mir]

Weißt du schon, nach welchen Kriterien du die Weiche stellen möchtest??

• alle Browser verstehen HTML5
  • ggf. gibt es den HTML5-shiv
• alle Browser ignorieren ihnen unbekannte CSS-Eigenschaften
• alle Browser beherrschen opacity

Ein Klick auf "show all" offenbart jede Menge grün.

⇒ Dein Vorhaben scheint unsinnig. Selbst für eine Übungsaufgabe.

Bis demnächst
Matthias