The critical rendering path, reflow and repaint, event delegation, and storage and cookie mechanics.
4 questions in Frontend Engineering.
A plain script in the head stops the parser until it is fetched and run. defer fetches in parallel and runs after parsing, in document order, before DOMContentLoaded. async runs as soon as it arrives, in no guaranteed order. Module scripts are deferred by default and also accept async.
Each will-change: transform requests its own compositor layer, a raster in memory sized by area and device pixel ratio. Hundreds of idle layers exhaust a phone's GPU memory and add compositing work, and scrolling was never limited by the cards. Remove the blanket rule, find the real jank, promote only what animates.
The browser parses HTML into the DOM and CSS into the CSSOM, combines them into a layout tree, then runs style, layout, paint and composite. Reading a geometry property after a write forces the browser to flush layout early, so a loop that interleaves reads and writes pays for a full layout every iteration.
Transform and opacity can be applied by the compositor to an already-rasterised layer, skipping style, layout and paint, and running off the main thread. Promotion buys that at the cost of memory, extra rasterisation and layers you forgot to retire.