Dwight Jack Workroom

One of the best rule in development is that the less you (as developper) struggle, the more the user will… and viceversa.

Lately i’ve tested some techniques to overcome the blocking nature of script tags to improve page load performance, and i ended up using LABjs which seems a really promising project.
The main drawback of this non blocking technique is that, since JavaScript parsing is not blocking the interface anymore users may encounter several flash of unstyled (or un-behaviored) content (FOUC – FUBC), which may break the interface (and make your marketing team screams at you).

The solution here is: struggle a bit more instead of leaving script tags in the head.

What i’ve came up by following some suggestions by the LABjs author and the web community is to separate my CSS styles in two separate levels: one for un-behaviored contents and one for JavaScript enabled browsers.
The trick is simple: since the only tag script you need is the one of LABjs, just open it and add this line at the very top of the file:

document.documentElement.className = 'hasJS';

This way you will add a hasJS class to the html tag that you may target in the CSS rules to overwrite and implement styles to get your interface ready for JavaScript interactions.

The drawback of this technique is that adding a class attibute to html tag won’t validate, but that’s the only CSS addressable node before DOM ready event.

This way your interface won’t flash anymore and your users won’t notice any change while JavaScript is getting loaded in a more efficient way.

Tags: jajasvcript, labjs

Leave a response, or trackback from your own site.