CODEWITHSUNDEEP
javascriptdom
akonsu
akonsu

Reputation: 29536

several changes to DOM in the same browser tick cycle

If I add an element to the DOM, are the changes immediate? If I remove the same element in the next line of my code, will the element appear on the screen (for a short period of time)? Or does the display get updated when the current browser cycle ends?

Upvotes: 3

Views: 493

Answers (2)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

Obviously appearance of elements depends on the power of CPU, browser algorithms, graphic card render time, monitor frequency and many other factors. However The programs (e.g JavaScript) may continue the actions by considering virtual elements without errors.

On the other hand the browser algorithm may decide to render the code line by line or not. As an experience if you run a heavy loop to append items to the body, the Opera browser displays the items one by one however the Chrome will render the page at the end of loop. However if you do the loop using the JavaScript setTimeout, in all browsers you will see the elements appearing one by one.

Upvotes: 0

Wainage
Wainage

Reputation: 5412

It will NEVER show no matter how fast your machine is. Javascript will run to completion blocking the UI until its done.

Try this

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"

will pause your browser and then show Two ... never One

Upvotes: 4

Related Questions