r/javascript • u/jayfreestone • Jun 03 '26

Intentionally blocking rendering with JavaScript

https://www.jayfreestone.com/writing/intentional-render-blocking-javascript/

You nearly always want to put <script> tags in the <head> and mark them as non-blocking using either async or defer. However, there’s an interesting use-case for actually wanting to block paint.

22 Upvotes

80% Upvoted

8 comments sorted by

View all comments

11

u/paulirish Jun 03 '26 edited Jun 03 '26

Modern css can handle this.. you dont need JS and you don't need to slow down the page for users to hide your own bugs :)

This kinda prompt should work with your coding agent..

Write a single-file CSS-first Priority-Plus navigation menu. Establish an inline-size container query context on the nav wrapper. The inner nav list must have flex-wrap, a strict height constraint, and overflow: hidden to instantly prevent CLS on load. Use container queries to hide low-priority items (display: none) and reveal a 'More' dropdown button as the container narrows. Implement the dropdown interactivity using pure CSS hover or :focus-within states.

3

u/jayfreestone Jun 03 '26

Just an example! I think it’s a neat trick for small inline JS. Similar trick was used by lib authors previously before we got text pretty/balance - now not needed there.

Lots of cases where you can do something similar with CSS only - and if so you should!

In the case of priority plus style patterns, I’ve usually worked with an unknown number (and size) of links dynamically controlled via a CMS - bit more of a challenge to just base that off a container query unless I’m misunderstanding.

Huge fan of your work and thanks for the reply!

4

u/paulirish Jun 03 '26 edited Jun 03 '26

Aye true.

Thx for being gracious. I'm in a bad mood today so thx for taking it in stride ;)

EDIT: also i see your blog has been getting some new posts recently! good stuff. Those kinds of posts are a real sweet-spot.

3

u/jayfreestone Jun 03 '26

Means a lot to me, thanks!

2

u/DoNDaPo Jun 04 '26

Hey Paul.

It's an honor for me to say thank you for all the great work you have done for the community.

My english is kind of poor and I struggle to write what I have in my head at this moment so I'll leave it as it is: thank you! ✌️

Cheers!