Does JavaScript Need to Precede CSS for Optimal Page Rendering?

Should CSS Always Precede JavaScript?

Question:
Online recommendations frequently advise placing CSS before JavaScript, suggesting that the rendering thread requires all necessary style information before displaying the page. Is this recommendation still valid?

Answer:

To investigate this claim, various tests were conducted using a Ruby script that allowed for arbitrary delays in JavaScript and CSS retrieval. The results revealed that the performance of modern desktop browsers actually improves when JavaScript includes are placed first:

• CSS First: Page rendering takes 1.5 seconds.
• JavaScript First: Page rendering takes 1.4 seconds.

Similar results were observed in Chrome, Firefox, and Internet Explorer. However, Opera showed no difference in rendering time.

Explanation:
Modern browsers implement speculative parsing, where they start retrieving and executing scripts before they encounter a tag. Due to this, the browser waits for JavaScript to load and execute before downloading CSS, negating any benefits of including CSS first.

Conclusions:
Based on the test results, it is optimal to include external style sheets after external scripts in the tag, especially for desktop browsers with over 85% market share. This order ensures parallel downloading and improves performance for the majority of users.

Exceptions:
Note that the above conclusions apply to desktop browsers and may not hold for mobile browsers, as some do not currently support speculative parsing. Therefore, it remains prudent to test and consider the performance impact on your specific audience.

The above is the detailed content of Does JavaScript Need to Precede CSS for Optimal Page Rendering?. For more information, please follow other related articles on the PHP Chinese website!