1

I found some peculiar behavior that only happens in Chrome, and I dont know if this is expected behavior, or if it's a bug in Chrome. I've simplified my code down to this:

function doSequence() {
  document.getElementById('test').innerHTML = '1';
  alert('2');
  document.getElementById('test').innerHTML = '3';
  alert('4');
  document.getElementById('test').innerHTML = '5';
  alert('6');
}

In IE and Edge this works as expected, alternating showing the numbers in the div and in the alert box, in the proper order (1,2,3,4,5,6).

However, when I run it in Chrome, I see the alert box first, even though the div is assigned to first. In fact, I see the alert box three times (2,4,6), and the div is always blank. After the alert box closes the third time, I see the number 5 in the div. It acts like it skips assigning '1' and '3' to the div altogether. And then it assigns '5' to the div after the alert has been closed (even though the instruction for assigning '5' is before the alert for '6').

My question is - is this expected behavior with Chrome, or is it a bug? Also, I was able to remedy this by putting the alert commands inside setTimeout functions with a delay of around 100ms. Is there another way to work around this behavior?

Here is a live example. It works as you would expect it to in IE and Edge (1,2,3,4,5,6). But if you run it in Chrome you will see the numbers 2,4,6,5.

var doSequence = function() {
  document.getElementById('test').innerHTML = '1';
  alert('2');
  document.getElementById('test').innerHTML = '3';
  alert('4');
  document.getElementById('test').innerHTML = '5';
  alert('6');
}
setTimeout(doSequence,1000);
#test {
  font-size:48pt;
  padding:14px;
  margin:14px;
  max-width:48px;
  min-height:64px;
  border:solid 1px #ccc;
}
<div id='test'>

</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Matt Spinks
  • 6,380
  • 3
  • 28
  • 47
  • DOM updates are not guaranteed to be rendered until Javascript returns to the main event loop. I don't think it's defined whether blocking in `alert()` counts. – Barmar Feb 01 '17 at 17:05
  • That makes sense, since `alert` stops the thread. Is that ("DOM updates are not guaranteed to be rendered until Javascript returns to the main event loop") defined in a spec somewhere? Or is that just observed behavior? – Matt Spinks Feb 01 '17 at 17:09
  • I think the exact relationship isn't defined. See http://stackoverflow.com/questions/20251332/is-dom-rendering-guaranteed-to-block-during-a-single-synchronous-functions-ex for instance – Barmar Feb 01 '17 at 17:22
  • Very interesting. Thanks for the info. – Matt Spinks Feb 01 '17 at 17:44
  • DOM rendering is known as reflow. There are lots of articles and SO questions and answers dedicated to figuring out DOM reflow leading to frameworks like React.js and Angular that use pure-js virtual DOM to completely avoid reflow in order to improve rendering performance. Since reflow affects performance different browsers and even different versions of the same browser may trigger reflow differently. It seems Chrome has optimised reflow on alert to improve rendering speed while IE and Edge have not – slebetman Feb 01 '17 at 18:09

0 Answers0