Wann wird die Anzeige wie aktualisiert?

[Don P]

Hallo zusammen,

Die Frage ist vielleicht etwas blöd, aber ich versuch's trotzdem:

Eine JavaScript-Anwendung nimmt Daten per Mausklick entgegen, die dann statistisch ausgewertet und angezeigt werden, unter anderem als Balkendiagramm. Man kann die Daten aber auch in ein Textfeld einfügen, statt sie per Mausklick einzeln einzugeben.

Wenn nun viele Daten vorliegen (ins Textfeld eingefügt) findet die Auswertung trotzdem der Reihe nach statt und die Anzeige wird mit jedem neuen Datum aktualisiert, d.h. eben nicht: Die Anzeige wird nicht wie ein schneller Film abgespult, wie man vielleicht erwarten würde, sondern man sieht während des Programmlaufs keine Änderung am Bildschirm. Erst der Endstand der Auswertung ist dann sichtbar.

Das ist nicht wirklich ein Problem. Wenn man die Zwischenergebnisse wie einen Film sehen will, kann man ja mit settimeout & Co. arbeiten, soviel ist mir klar.

Was mich interessiert ist aber: Was passiert mit den Befehlen, die zur Aktualisierung der Bildschirmanzeige führen würden, wenn das Programm noch nicht fertig ist? Wenn sich z.B. die Anzahl und Höhen verschiedener Div-Elemente laufend ändert, auch der Text-Inhalt mancher HTML-Elemente, was aber alles nicht zu sehen ist? Werden die Änderungen dann einfach verworfen, oder merkt sich das System die irgendwie und führt sie schließlich doch alle aus?

Ich will nicht unbedingt die Bilschirmaktualisierung aus Performancegründen extra unterdrücken müssen. Deshalb wäre es interessant zu wissen, wie genau JavaScript bzw. die Browser da vorgehen.

Gruß, Don P

[suit]

Deshalb wäre es interessant zu wissen, wie genau JavaScript bzw. die Browser da vorgehen.

wenn sich im html- oder css-code etwas ändert, wird das sofort vom browser bearbeitet - ob das 100 änderungen in der sekunde sind oder eine einzelne nach 20 minuten

du solltest allerdings tunlichst darauf schaun, dass nicht zu viel und zu oft geändert wird, sonst hast du mit alten/langsamen rechnern ein problem

[Don P]

Hallo,

wenn sich im html- oder css-code etwas ändert, wird das sofort vom browser bearbeitet - ob das 100 änderungen in der sekunde sind oder eine einzelne nach 20 minuten

Hmmm... ja, das wäre logisch. Du meinst also, der Browser macht alle Änderungen trotzdem, auch wenn er sie nicht anzeigt. Das würde bedeuten, dass es auf jeden Fall Perfomance kostet, laufend DOM-Elemente zu manipulieren, auch wenn davon nichts zu sehen ist.

Also müsste ich dann doch alles unterdrücken, was ohnehin nicht sichtbar wird. Schade.

Gruß, Don P

[suit]

Hmmm... ja, das wäre logisch. Du meinst also, der Browser macht alle Änderungen trotzdem, auch wenn er sie nicht anzeigt. Das würde bedeuten, dass es auf jeden Fall Perfomance kostet, laufend DOM-Elemente zu manipulieren, auch wenn davon nichts zu sehen ist.

Also müsste ich dann doch alles unterdrücken, was ohnehin nicht sichtbar wird. Schade.

leider hab ich dazu nicht gefunden, aber eni sichtbarkeitsentscheid wird sicher durchgeführt - warum sollten dinge, die ohnehin nicht sichtbar sind oder werden aktuell behandelt werden?

das ist ein standardverfahren in der computergrafik - alles was definitiv nicht sichtbar ist, wird weggeworfen und garnicht erst berechnet

[Hopsel]

Hi suit!

leider hab ich dazu nicht gefunden, aber eni sichtbarkeitsentscheid wird sicher durchgeführt - warum sollten dinge, die ohnehin nicht sichtbar sind oder werden aktuell behandelt werden?
das ist ein standardverfahren in der computergrafik - alles was definitiv nicht sichtbar ist, wird weggeworfen und garnicht erst berechnet

Naja, aber JavaScript hat ja nun relativ wenig mit Computergrafikberechnung zu tun.
Wenn du etwas im DOM-Baum änderst, dann passiert das auch dann, wenn ein Element (z. B. via position:absolute) darüber liegt oder das bearbeitete Element nicht sichtbar ist.

Erst der Browser, der die Elemente anzeigt und Grafikfunktionen des Betriebssystems, einer Bibliothek oder irgendeiner Schnittstelle nutzt, entscheidet (evtl. eben auch über diese Schnittstellen) ob eine Berechnung zur Anzeige eines Bildes, Elementes, etc. überhaupt durchgeführt werden muss.
Da ist JavaScript aber schon lange Geschichte.

MfG H☼psel

[Hopsel]

Hi Ingrid!

Da ist JavaScript aber schon lange Geschichte.

... glaub ich ... ;-)

MfG H☼psel

[suit]

Naja, aber JavaScript hat ja nun relativ wenig mit Computergrafikberechnung zu tun.

schon klar ;)

Wenn du etwas im DOM-Baum änderst, dann passiert das auch dann, wenn ein Element (z. B. via position:absolute) darüber liegt oder das bearbeitete Element nicht sichtbar ist.

auch das ist klar, natürlich - aber wenns jetzt nur um die manipulatio von css-eigenschaften geht die nicht gerendet werden müssten, sieht das anders aus - wenn im dom neue elemente hinzugefügt werden, ist ads natürlich etwas adneres

Erst der Browser, der die Elemente anzeigt und Grafikfunktionen des Betriebssystems, einer Bibliothek oder irgendeiner Schnittstelle nutzt, entscheidet (evtl. eben auch über diese Schnittstellen) ob eine Berechnung zur Anzeige eines Bildes, Elementes, etc. überhaupt durchgeführt werden muss.

zb
#foo {
  display: none;
  color: green;
}

wird in

#foo {
  display: none;
  color: red;
}

abgeändert

da wäre der browser schön dämlich, wenn er das element mit der id foo tatsächlich neu rendert

[Hopsel]

Hi suit!

zb
#foo {
  display: none;
  color: green;
}

wird in

#foo {
  display: none;
  color: red;
}

abgeändert

da wäre der browser schön dämlich, wenn er das element mit der id foo tatsächlich neu rendert

Jetzt verstehe ich dich mal... =)
Recht hast du natürlich. Aber die Eigenschaft wurde trotzdem geändert.
JavaScript hat also gearbeitet.
Wäre das Element sichtbar, so würde JavaScript genau die gleiche CPU-Leistung in Anspruch nehmen.
Dass der langsame Browser ewig braucht, um das Element neu zu rendern, ist ja nicht seine™ Schuld.

Was ich sagen will: Du hast Recht und ich habe auch Recht! =)

MfG H☼psel

[Don P]

Hallo,

leider hab ich dazu nicht gefunden, aber eni sichtbarkeitsentscheid wird sicher durchgeführt - warum sollten dinge, die ohnehin nicht sichtbar sind oder werden aktuell behandelt werden?

das ist ein standardverfahren in der computergrafik - alles was definitiv nicht sichtbar ist, wird weggeworfen und garnicht erst berechnet

Naja, vielleicht habe ich mich auch unklar ausgedrückt. In einer Schleife wird ein Datum nach dem anderen verarbeitet, und am Ende der Scheife steht z.B. etwas wie
bla.innerHTML = ergebnis;
Der Browser müsste doch jetzt den neuen Inhalt anzeigen, denn eigentlich kann er nicht wissen, dass 200ms später das Script wieder am selben Punkt angekommen sein wird, um erneut
bla.innerHTML = ergebnis;
auszuführen, aber jetzt mit einem anderen Ergebnis. Die Anzeige müsste sich also laufend ändern, tut sie aber nicht. Egal wie viele solche Befehle vorkommen und in welchen Abständen, z.B. immer nur nach jedem 1000sten Schleifendurchlauf, am Bildschirm tut sich erst etwas, wenn das Programm fertig ist. Dann sieht man das Endergebnis.

Was macht also der Browser inzwischen mit
bla.innerHTML = ergebnis;
wenn er es doch nicht anzeigen will? Führt er es aus, irgendwo unsichtbar im Speicher? Wahrscheinlich schon. Aber warum aktualisiert er dann die Anzeige nicht jeweils (die faule Sau ;-))?

Gruß, Don P

[ChrisB]

Hi,

In einer Schleife wird ein Datum nach dem anderen verarbeitet, und am Ende der Scheife steht z.B. etwas wie
bla.innerHTML = ergebnis;
Der Browser müsste doch jetzt den neuen Inhalt anzeigen, denn eigentlich kann er nicht wissen, dass 200ms später das Script wieder am selben Punkt angekommen sein wird, um erneut
bla.innerHTML = ergebnis;
auszuführen, aber jetzt mit einem anderen Ergebnis. Die Anzeige müsste sich also laufend ändern, tut sie aber nicht. Egal wie viele solche Befehle vorkommen und in welchen Abständen, z.B. immer nur nach jedem 1000sten Schleifendurchlauf, am Bildschirm tut sich erst etwas, wenn das Programm fertig ist. Dann sieht man das Endergebnis.

Ja, so ist das nun mal™.

So lange JavaScript "kontinuierlich" laeuft, aktualisieren die Browser die Anzeige nicht.

Wenn du das umgehen willst, nutze keine normale Schleife, sondern bastle dir ueber setTimeout/setInterval und damit wiederholte Aufruf einer Funktion eine Schleife nach - zwischen den einzelnen Aufrufen gibt der JavaScript-Interpreter die Kontrolle dann wieder an die Rendering-Engine des Browsers zurueck, so dass diese die Anzeige updaten kann.

MfG ChrisB