Why does a microtask DOM change not show a flash before the change in JavaScript?
Because microtasks run before rendering. If you set color to red and a microtask sets it to blue, the browser paints blue (microtask runs before paint). The user never sees red. With setTimeout (macrotask), the user sees red then blue.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Rendering and the Event Loop in JavaScript
Between macrotasks. The event loop runs a macrotask, drains all microtasks, then renders (if needed, usually at 60fps). Then takes the next macrotask. Microtasks run before rendering.
Yes. The event loop drains all microtasks before rendering. If microtasks take longer than 16.6ms, the paint is delayed and a frame is dropped. Keep microtasks short for smooth rendering.
A callback that runs before the next paint. It syncs with the browser's refresh rate (usually 60fps). It is the correct way to do visual animations. Use it instead of setTimeout for animations.
Still have questions?
Browse all our FAQs or reach out to our support team