Höhe von DIV-Elementen

[Don P]

Hallo,

Hier im Forum habe ich öfter gelesen, dass man style-Eigenschaften möglichst nicht per JavaScript direkt setzen soll, sondern nur über CSS durch Zuweisen von className-Attributen.

Das erscheint mir zwar sinnvoll, aber jetzt frage ich mich doch, ob es wirklich besser ist über 30 verschiedene CSS-classNames zu erstellen für die verschiedenen Höhen, die gewisse DIV-Elemente annehmen können.

Es handelt sich um Balkendiagramme, die ich mit übereinanderliegenden DIVs in verschiedenen Farben realisiert habe. Jedes DIV kann wie gesagt über 30 verschiedene Höhen annehmen. Bis jetzt mache ich das einfach durch Zuweisen von style.height nach der Höhenberechnung. Es können aber schon hunderte verschiedener DIVs werden, bis alle Balken nebeneinander aus den vertikal gestapelten DIVs fertig sind.

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?
Klar, ich könnte es ausprobieren, aber vielleicht weiß ja jemand Bescheid, so dass ich mir die Mühe sparen kann...

Danke und Gruß,
Don P

[Christian S.]

Hi,

Hier im Forum habe ich öfter gelesen, dass man style-Eigenschaften möglichst nicht per JavaScript direkt setzen soll, sondern nur über CSS durch Zuweisen von className-Attributen.

Das macht für mich nur Sinn in Bezug auf Übersichtlichkeit und Wartbarkeit bei _statischen_ CSS Eigenschaften.

Das erscheint mir zwar sinnvoll, aber jetzt frage ich mich doch, ob es wirklich besser ist über 30 verschiedene CSS-classNames zu erstellen für die verschiedenen Höhen, die gewisse DIV-Elemente annehmen können.

Meiner Meinung nach nicht. Man muss sich immer fragen, was sinnvoller ist. Extra noch Logik (30 if-statements) einzubauen, die aus einem Wert einen CSS-Klassenamen ermittelt, erscheint nicht sinnvoll.
Der Wert kann direkt in die Höhe durch eine einfache Methode umgerechnet werden. Das macht auch Sinn in Bezug auf Skalierbarkeit.
Möchtest du dein Diagramm z.B. doppelt so hoch machen, so müsstest entweder 30 CSS Klassen ändern, oder in deiner Logik ein simples "* 2" irgendwo einbauen.

Letzteres dient wohl eher der Wartbarkeit und ließe sich auch dynamisch zur Laufzeit ändern.

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?

Kann ich nichts zu sagen, aber vom Gefühl her, würde ich schätzen, dass es keinen merkbaren Unterschied machen sollte.

Gruß!

[Don P]

Hi C.S,

Das erscheint mir zwar sinnvoll, aber jetzt frage ich mich doch, ob es wirklich besser ist über 30 verschiedene CSS-classNames zu erstellen für die verschiedenen Höhen, die gewisse DIV-Elemente annehmen können.

Meiner Meinung nach nicht. Man muss sich immer fragen, was sinnvoller ist. Extra noch Logik (30 if-statements) einzubauen, die aus einem Wert einen CSS-Klassenamen ermittelt, erscheint nicht sinnvoll.

Ich dachte da an etwas relativ einfaches wie divElt.className = 'H' + calcHeight(i);
Dann müssten halt viele classNames namens 'Hxx' bereits existieren.

Der Wert kann direkt in die Höhe durch eine einfache Methode umgerechnet werden. Das macht auch Sinn in Bezug auf Skalierbarkeit.
Möchtest du dein Diagramm z.B. doppelt so hoch machen, so müsstest entweder 30 CSS Klassen ändern, oder in deiner Logik ein simples "* 2" irgendwo einbauen.

Letzteres dient wohl eher der Wartbarkeit und ließe sich auch dynamisch zur Laufzeit ändern.

Da hast du wohl recht. Habe ich so noch gar nicht bedacht. Tatsächlich gibt es auch Balken aus nur je einem DIV, die wegen sonst auftretender Überlängen nur auf logarithmischer Skala dargestellt werden können, und das ergibt dann sehr viele verschiedene Werte, also ginge es mit denen ohnehin nicht richtig per className.

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?

Kann ich nichts zu sagen, aber vom Gefühl her, würde ich schätzen, dass es keinen merkbaren Unterschied machen sollte.

Die fertigen Balken weden mit DOM-Methoden (appendChild) eingehängt. innerHTML wäre verutlich etwas schneller, aber das gibt ganz hässlichen JS-Quellcode... mache ich erst, wenn die Performance wirklich zum Problem wird. Bis jetzt ist es noch ganz passabel.

Danke und Gruß,
Don P

[ChrisB]

Hi,

Ich dachte da an etwas relativ einfaches wie divElt.className = 'H' + calcHeight(i);
Dann müssten halt viele classNames namens 'Hxx' bereits existieren.

CSS-Regeln können sie auch existieren, wenn sie dynamisch per JavaScript erzeugt wurden.

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?

Benchmarks dazu finden sich im Netz. Das wirkt sich aber nur in entsprechend „großem Maßstab“ aus - bei einem Diagrämmchen, dass du per JavaScript erzeugst, ist das absolut egal.

Generell zur Thematik:

Grundsätzlich ist natürlich der Weg, Logik, Daten und Darstellung zu trennen, der der Wahl - und damit in so einem Fall auch, per JavaScript eben Klassen zu setzen, die mit Regeln korrespondieren, die Formatierung dort unterbringen, wo sie hingehört - im Stylesheet.

In einem Spezialfall wie diesem hier kann man davon aber natürlich abweichen. Die Darstellung ist hier nicht streng von den Daten getrennt, sondern „Bestandteil“ der Daten - schliesslich ist die Höhe der Balken im Verhältnis zu einander nicht vom jeweiligen „Geschmack“ abhängig, wie das rot oder blau als Hintergrundfarbe wären - sondern ist ein wesentlicher Bestandteil der Visualisierung der Daten, die anderweitig gar keinen Sinn ergeben würde.
Deshalb kann man hier die Höhe durchaus guten Gewissens auch direkt per JavaScript setzen. (Bei der schon erwähnten Hintergrundfarbe sieht das wieder anders aus, die gehört ins Stylesheet.)

Und der wichtigste Schritt vor diesen Überlegungen ist natürlich der, dass die Daten erst mal im HTML in einer Weise repräsentiert werden, die sie auch nutzbar macht, wenn kein JavaScript oder möglicherweise nicht mal CSS vorhanden sind.

MfG ChrisB

[Don P]

Hallo,

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?

Benchmarks dazu finden sich im Netz. Das wirkt sich aber nur in entsprechend „großem Maßstab“ aus - bei einem Diagrämmchen, dass du per JavaScript erzeugst, ist das absolut egal.

Es geht mir schon eher um "großen Maßstab": So ein Diagramm wird laufend aktualisiert, wie bei einem Audio-Equalizer, der in Echtzeit die Amplituden der versch. Frequenzen des Audiosignals als Balken anzeigt, die auf und ab springen. Aus Perfomancegründen kann man das Intervall einstellen, z.B. nur jeden 20sten Schritt neu rendern oder jeden 100sten oder die Anzeige ganz einfrieren, wenn man eine schnelle Auswertung im Hintergrund will. Man kann z.B. auch durch die Daten scrollen und das Diagramm läuft dabei mit.

Performance ist also schon wichtig, wird aber durch die Möglichkeit, die Anzeige temporär abzuschalten, relativiert. Wer jeden einzelnen Schritt grafisch dargestellt haben will, muss halt eine längere Gesamtlaufzeit in Kauf nehmen. Die Daten selber sind nicht zeitkritisch, d.h. nicht wie bei einem Equalizer, der unbedingt in Echtzeit arbeiten muss.

Ich werde also dabei bleiben und die Höhen einfach per style.height setzen. Das scheint in diesem Fall wirklich gerechtfertigt, wie ich auch euren Ausführungen entnehme.

Danke und Gruß,
Don P