Hey fellow web developers! Understanding how the browser does its thing is key for us. Have you ever thought about what happens when a Promise is done doing its job? Or maybe you've wondered why websites can feel a bit sluggish sometimes? And seriously, why do we toss in setTimeout(func, 0) all the time? Well, this deep dive into the inner workings of browsers is here to spill the beans on these questions and more. We're going to unpack the techy stuff in a way that makes sense, so you can really grasp the behind-the-scenes magic of the websites you're creating!

What will the audience learn:
• Modern browsers architecture - birds eye view
• Multi-process and reasoning behind it
• What happens in the Renderer process
• How long executing JS can block the rendering and affect responsiveness
• Difference between a rendering cycle and an event loop cycle
• UI events prioritization by browser
• Macro tasks and micro tasks
• Ways to make their web sites more responsive (and the logic behind it)

Outline:
- Intro and background
- One day in developers' life (everyone can related to it)
- Problem statement
- Zoom out - browser architecture
- Zoom in - Multi-process in browsers architecture
- Zoom in - Multi-threading in Renderer process
- Zoom in - Execution of web application code
- Zoom in - main thread
- Game loop and its similarity to browser's event loop
- Task queue
- UI events prioritization
- setTimeout Web API and its inner workings
- Ergonomics issue with setTimeout
- yieldToMain (a more ergonomic alternative to setTimeout)
- async/await syntactic sugar
- Micro tasks vs macro tasks
- Optimizing example from the beginning using the learned techniques
- New Scheduler API
- Summary

A glimpse at what I'm gonna talk about: https://www.justjeb.com/post/why-does-settimeout-work