{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-8---event-loop/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"2c07cb34-bfbc-586b-a50a-30c357c5abae","excerpt":"JavaScript is a single threaded programming languagesingle threadsingle call stackIts runtime can only process one piece of code at a timeAny code that is slow blocks the stack.For example console.log isn’t slow, but doing a while loop from one to ten billion is slow, doing image…","html":"

JavaScript is a single threaded programming language

\n\n

Any code that is slow blocks the stack.

\n

For example console.log isn’t slow, but doing a while loop from one to ten billion is slow, doing image processing is slow, and network request is slow.

\n

what happens when things are slow?

\n

The browser gets stucked. While the request is handled, the browser can’t render thereby users can’t do anything until those requests complete.

\n

The solution? Asynchronous callbacks

\n
console.log('hello')\n\n// this part goes to WebAPIs\nsetTimeout(function() {  console.log('there')}, 3000)\nconsole.log('how are you?')\n\n// hello\n// how are you?\n// there
\n

But how is this possible if JavaScript runtime is single threaded?\nBecause browser is more than just the Runtime. It provides us with WebAPIs, which we can make calls to. So it’s working as multi threads in the back. This diagram is basically identical for node, except the fact that it’s using C++ APIs instead of WebAPIs.

\n

\"JSEventloop\"

\n

Event loop’s job

\n

Event loop looks at the stack and the task queue. If the stack is empty, it takes the first thing on the queue and pushes it on to the stack.

\n

The order of proccessing asynchronous callback

\n
    \n
  1. Pass the callback to webAPIs and pop off the callback from stack
    2. \n
  2. WebAPIs pushes the callback on to the task queue when it’s done
    3. \n
  3. Event loop checks if the call stack is empty
    4. \n
  4. If the call stack is cleared, event loop pushes the callback from the task queue to the call stack
    5. \n
\n

setTimeout is a minimum time to execution

\n

setTimeout is not guaranteed time to execution, it’s a minimum time to execution.

\n
console.log('hello1')\n\n// setTimeout zero doesn't run immediately\nsetTimeout(function() {\n  console.log('hello2')\n}, 0)\n\nconsole.log('hello3')\n\n// hello1\n// hello3\n// hello2
\n
\n
\n

Conclusion : Don’t put slow code on the stack because when you do that, the browser can’t do what it needs to do, creating a nice fluid UI.

\n
\n
\n
\n

Reference

\n

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=821s

\n
\n
","frontmatter":{"title":"JavaScript Concept 8 - Event Loop","date":"July 08, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-8---event-loop/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-7---==-and-===/"},"frontmatter":{"title":"JavaScript Concept 7 - == and ===","category":"JavaScript"}},"next":{"fields":{"slug":"/JavaScript/javascript-concept-9---functional-programming-&-object-oriented-programming/"},"frontmatter":{"title":"JavaScript Concept 9 - Functional Programming & Object Oriented Programming","category":"JavaScript"}}}}}