Example 1 - Slow Performance in JS

Examples

Blocking Click Handler

This Process will block the main thread, and you'll notice that the DOM does not change until after the function execution completes regardless of the code structure.

Blocking Call, Nested Functions

Nested Calls do not save you.

Non-Blocking Call

This Process will block the main thread when it runs, but it will update the DOM immediately since the dom repaint will occur before the setTimeout is run after the repaint.

More Complex Call Tree

This is here to show how the call tree works.

Run a WebWorker

This Process will not block the main thread, as it's run in a separate thread in the workers.

Update The Dom

Click this while one of the examples is running to see the DOM update or not, depending

References

• MDN JS Concurrency Model
• Set Timeout Trick for CPU intensive code
• Web Workers - Run code in Background Threads