Should css always precede javascript

There are two main reasons for placing CSS before JavaScript.

1. In older browsers (Internet Explorer 6-7, Firefox 2, etc.), initiating a script download blocks all subsequent downloads. Therefore, if you place a.js before b.css, they will be downloaded sequentially: first a.js, then b.css. If you place b.css before a.js, they will be downloaded in parallel, resulting in faster page load times.

2. No content is rendered before all style sheets are downloaded—this holds true across all browsers. Scripts differ in that they block the rendering of all DOM elements below the script tag. Placing scripts in the HEAD means the entire page is blocked from rendering until all style sheets and all scripts are downloaded. While blocking rendering for style sheets is sensible (to ensure immediate correct styling and avoid flash of unstyled content), blocking the entire page for scripts is unnecessary. Typically, scripts affect only specific DOM elements or parts of them. It is better to load scripts as low on the page as possible, or load them asynchronously.

Creating examples with Cuzillion is interesting. For instance, the page at http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f has a script in its HEAD, so the entire page remains blank until the download completes. However, if you move the script to the end of the BODY block, the page title will render because these DOM elements appear above the SCRIPT tag, as seen on this page.

In most cases, placing CSS before JavaScript offers several clear benefits, primarily related to page loading performance and user experience.

1. Improving Rendering Performance

The rationale for loading CSS before is that the browser parses HTML and builds the DOM (Document Object Model) while concurrently downloading CSS files and constructing the CSSOM (CSS Object Model). Once both the CSSOM and DOM are ready, the browser combines them to render the page. If CSS loading is deferred or occurs after JavaScript files, the browser may not render the page immediately due to incomplete CSSOM construction, resulting in incomplete page display or layout shifts that negatively impact user experience.

For example, in real-world projects, delayed CSS loading can cause users to see unstyled HTML content (also known as FOUC—Flash of Unstyled Content) until the CSS files are loaded and parsed, after which the page renders correctly.

2. JavaScript and CSS Interaction

Another key reason is that JavaScript frequently manipulates the DOM and relies on specific CSS rules for layout and functionality. If CSS is loaded after JavaScript, JavaScript may fail to correctly query or apply styles during execution because the relevant CSS rules are not yet available.

For instance, if a JavaScript script attempts to dynamically adjust an element's size or position but the corresponding CSS has not yet loaded, the script may execute incorrectly because the styles are not applied to the elements.

3. Exceptional Cases

Although it is generally recommended to load CSS first, there are scenarios where JavaScript should be prioritized. For example, when JavaScript is used for critical tasks such as dynamic content generation or early data fetching, loading JavaScript first may be necessary. In such cases, developers must ensure that JavaScript execution does not adversely affect page rendering.

Summary: Overall, placing CSS before JavaScript optimizes the page rendering process, reduces content flashing, and ensures JavaScript correctly manipulates styled DOM elements. This approach aligns with web performance best practices. However, exceptions exist, and the resource loading order should be adjusted based on specific project requirements and scenarios.

I won't dwell on the results. I believe this is subjective, but I have reasons to explain why it's better to load CSS before JavaScript.

During website loading, you'll see two scenarios:

Case 1: blank screen → unstyled website → styled website → interactive → styled interactive website

Case 2: blank screen → unstyled website → interactive → styled website → styled and interactive website

Frankly, I can't imagine anyone choosing Case 2. This means users with slow internet connections will face an unstyled website that allows them to interact via JavaScript (since the site has loaded). Additionally, this maximizes the time spent on the unstyled website. Why would anyone want that?

As jQuery states (http://api.jquery.com/ready/), it works better:

"When using scripts that depend on CSS style property values, it's important to reference external style sheets or embedded style elements before referencing the script."

When files are loaded in the wrong order (JavaScript first, then CSS), any JavaScript code that depends on properties set in the CSS file (e.g., width or height of a div) will fail to load correctly. It seems that if the loading order is wrong, JavaScript "sometimes" knows the correct properties (perhaps due to race conditions?). Depending on the browser used, this effect may be larger or smaller.