SS ツールボックス
すべてのデータはローカルで処理されます

JavaScript Main Thread Blocking Demo

Understand how JavaScript execution blocks the main thread and affects animations

A. Pure Transform (Compositor Thread)

Only operates transform, continues when main thread is blocked.

B. Transform + Width (Mixed)

Mixed

Operates transform and width simultaneously, stops when main thread is blocked.

C. JavaScript (rAF)

Completely depends on main thread, must stop.

D. Pure Margin (Layout Reflow)

Involves reflow, must stop.

Principle Summary

The browser is like a factory. The **compositor thread** is a worker responsible for moving and rotating boxes; while the **main thread** is an engineer responsible for measuring sizes and manufacturing boxes.

  • If only rotation is needed (A), the worker can handle it alone.
  • If rotating while changing size (B), the worker has to ask the engineer "What's the size now?" after each rotation.
  • If the engineer (main thread) is too busy, the worker can only wait for the engineer to respond, and the animation will freeze.
関連ツール