CODEWITHSUNDEEP
javascript
tonitone120
tonitone120

Reputation: 2300

How does (time-consuming) JS block rendering?

This question uses my understanding that:

Question: How does JS code being executed on the call-stack block rendering?

I know every window has one main-thread.
I know both JS code and rendering code are executed on the main-thread.
I know the browser wants to re-paint about every 16 ms.
Lastly, I get the impression the call-stack just executes JS functions and rendering tasks are not executed on the call-stack.

Perhaps to answer this question I'd need to know:

Upvotes: 0

Views: 285

Answers (2)

vvg
vvg

Reputation: 1203

What does a main thread look like?

Functionally, a browser window's main thread will do

  • document fetching (HTML)
  • document parsing (HTML parse) and begin creating DOM tree while applying inline styles
  • linked resource fetching (eg; stylesheet, images, .js etc.,)
  • loading of resources (scripts, stylesheets) in the HEAD section (note that scripts may be specified for async load or synchronous load)
  • script loading of scripts within the body
  • execution of scripts (these can update the DOM tree)
  • application of linked cascading stylesheets etc.,

All JS execution for a window is single-threaded. There are dependencies between these actions that would cause scripts or actions in the scripts to wait.

So, when the JS execution involves complex processing, it can perceptibly impact the window render.

Upvotes: 1

AKX
AKX

Reputation: 169051

There is only one thread running Javascript per browser tab/frame/window/WebWorker, and while Javascript is running, rendering will generally not happen.

There is no specific concept called a main stack aside from the call stack of whatever code may be running on the main thread.

Upvotes: 1

Related Questions