Threading

Main Thread

• The main thread is where a browser processes user events and paints.
• By default, the browser uses a single thread to:
  • run all the JavaScript in your page
  • perform layout, reflows, and garbage collection.
• The Main Thread :
  • parses HTML and builds the DOM
  • parses CSS and applies the specified styles
  • parses, evaluates, and executes the JavaScript.
  • processes user events (So, blocked main thread can cause web page non responsive)
• Ref:
  • https://developer.mozilla.org/en-US/docs/Glossary/Main_thread
  • https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown

UI is single threaded

• Almost all the UI frameworks are single threaded
• Making multithreaded UI is hard
• UI involves a lot of global state and is prone to deadlocks
• https://stackoverflow.com/questions/30932870/why-doesnt-javascript-get-its-own-thread-in-common-browsers
• https://stackoverflow.com/questions/34855352/how-in-general-does-node-js-handle-10-000-concurrent-requests

More references

• Inside Browser Series:
  • Multi process Architecture
  • Navigation
  • Renderer process
• https://stackoverflow.com/questions/13408567/what-processing-rendering-dont-browsers-do-while-a-tab-doesnt-have-focus (Multiple tab switching)