Intentionally blocking rendering with JavaScript

Scripts placed in the head are typically marked async or defer to avoid blocking paint. Some UI components depend on client-side JavaScript to produce correct layout or markup, and container queries may not fully solve the problem. Options include accepting a flash of unstyled content, hiding the component until scripts reveal it, or using render-blocking JavaScript to prepare everything before the user sees anything. Traditional inline scripts and non-async/defer external scripts are parser-blocking, which can prevent parsing and painting below the script, but it does not guarantee the component will never render in a default state. The blocking="render" attribute explicitly makes script, style, or stylesheet link render-blocking to reduce flashes and premature interactions.

"There's a neat, fairly well supported attribute for script tags that does exactly what we want: blocking="render". Allows putting 'blocking=render' as an attribute and value to a <script>, <style> or stylesheet <link> to make it explicitly render-blocking. The main usage is to avoid a flash of unstyled content or user interactions with an unmature page caused by, e.g., script-inser"

Read at Jayfreestone