mehrere Änderungen an DOM im gleichen Browser-Tick-Zyklus

Question

Wenn ich ein Element zum DOM hinzufügen, sind die Änderungen sofort? Wenn ich dasselbe Element in der nächsten Zeile meines Codes entferne, erscheint das Element (für eine kurze Zeit) auf dem Bildschirm? Oder wird das Display aktualisiert, wenn der aktuelle Browser-Zyklus endet?

Answer 1

Offensichtlich Aussehen der Elemente auf der abhängig Macht der CPU, Browser-Algorithmen, Grafik c Karte Renderzeit, Monitorfrequenz und viele andere Faktoren. Die Programme (z. B. JavaScript) können jedoch die Aktionen fortsetzen, indem sie virtuelle Elemente ohne Fehler berücksichtigen.

Auf der anderen Seite kann der Browser-Algorithmus entscheiden, den Code Zeile für Zeile zu rendern oder nicht. Als eine Erfahrung, wenn Sie eine schwere Schleife ausführen, um Elemente an den Körper anzuhängen, zeigt der Opera-Browser die Elemente nacheinander an, aber Chrome wird die Seite am Ende der Schleife rendern. Wenn Sie jedoch die Schleife mit dem JavaScript setTimeout ausführen, werden in allen Browsern die Elemente nacheinander angezeigt.

Answer 2

Es wird nie zeigen, egal wie schnell Ihre Maschine ist. Javascript wird bis zum Abschluss ausgeführt und blockiert die Benutzeroberfläche, bis sie fertig ist.

Versuchen Sie, diese

HTML

<div id='d'></div> 

JS

var d = document.getElementById('d'); 
var p = document.createElement('p'); 

p.innerText = "One"; 
d.appendChild(p); 

for (i = 0; i < 1000000; i++) { 
    for (z = 0; z < 10; z++){ 
    // this is nonsense that runs for a sec or two to block the JS thread 
    // please never do this in production 
    } 
} 

p.innerText = "Two" 

wird Ihr Browser pausieren und dann Two zeigen ... nie One