How browser executes Javascript and renders asynchronously

by

Javascript execution is single-threaded. It uses a task queue and the stack to execute stuff.

This piece of code:

for (var i=0;i<length;i++) {
     setTimeout(drawChartFunc,0);
}

Will add [length] setTimeouts calls on the task queue and excute all of them subsequently (0 ms timeout). Only the last operation will update the the screen, because all of the timeout tasks come first on the stack (after the loop, the task queue contains [length] setTimeout calls). Every timeout executes drawChartFunc. Now drawChartFunc does put a screen update function on the task queue, but the remaining timeouts come first, so first the next timeout is executed – the screen update functions can only be executed after the [length] setTimeout calls are finished (taken of the task queue/stack). This is also done subsequently, but very fast. If your eyes where trained to see nanosecond transitions, you may have spotted the subsequent numbers in the output 😉

Now

function updateLater() {
     drawChartFunc();
     i++;
     if (i < length) { 
         setTimeout(updateLater, 0);
     }
 }

Will first run drawChartFunc putting the screen update on the task queue, then put increment i on the task queue and – if applicable – after that add a new setTimeout to the task queue. In other words, drawChartFunc is put on the stack, that puts the screen update on the stack, both are executed, an subsequently the timeout is put on the stack, putting drawChartFunc on the stack … etc.

Concering the javascript task queue/stack: this video was really useful to me.

Here’s your jsFiddle, rewritten a bit. It shows you the queuing process for both methods.

More Related Contents:

  1. How to make JavaScript execute after page load?
  2. onKeyPress Vs. onKeyUp and onKeyDown
  3. When does reflow happen in a DOM environment?
  4. Firing event on DOM attribute change
  5. Event when window.location.href changes
  6. Why is the DOMSubtreeModified event deprecated in DOM level 3?
  7. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  8. How do I programmatically click on an element in JavaScript?
  9. Adding an onclick event to a table row
  10. Pass mouse events through absolutely-positioned element
  11. Unable to understand useCapture parameter in addEventListener
  12. Does javascript process using an elastic racetrack algorithm
  13. Using this inside an event handler
  14. Change ‘s option and trigger events with JavaScript
  15. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  16. Native JS equivalent to jQuery delegation
  17. Are event handlers in JavaScript called in order?
  18. HTML DOM: Which events do not bubble?
  19. Do I need to remove event listeners before removing elements?
  20. link element onload
  21. Wait for iframe to load in JavaScript
  22. Why inline JavaScript is bad?
  23. How many concurrent setTimeouts before performance issues?
  24. event.toElement in IE8 and Firefox?
  25. cloning javascript event object
  26. Is there any way of passing additional data via custom events?
  27. recursive function vs setInterval vs setTimeout javascript
  28. In web browsers, what’s the difference between onblur and onfocusout?
  29. Replacement for deprecated `keypress` DOM event
  30. Manually dispatchEvent DOMContentLoaded

Leave a Comment