Should CSS Come Before or After JavaScript in Modern Web Development?

Should CSS always precede JavaScript?
[A common question in web development]

Introduction:
Previously, it was believed that placing CSS before JavaScript was optimal for web performance. However, with modern browsers and recent advancements in technology, this may no longer be the case.

Test Results:
The author conducted extensive testing using different browsers and scenarios, comparing the performance of pages where CSS was placed before or after JavaScript. The results revealed that:

On Desktop Browsers:

• When CSS is delayed, placing JavaScript before CSS provides a trivial performance gain.

On Mobile Browsers:

• The author's tests on Android 4 showed that speculative parsing did not appear to be supported, which may affect the performance of CSS placement.

Conclusions:
Based on the test results, the author suggests that:

Desktop Browsers:

• Placing external style sheets after external scripts, only when old browser performance is not a concern, provides the best performance. (Approximately 85% of desktop browsers support speculative parsing.)

Mobile Browsers:

• The conclusion for mobile browsers may vary depending on the specific browser and OS used. However, it is likely that in most cases, placing CSS before JavaScript may still provide a performance benefit.

Additional Considerations:
The author notes that there are various arguments for placing scripts in the head versus the end of the body, but this discussion focuses specifically on the placement of CSS relative to JavaScript in the head.

Conclusion:
In modern desktop browsers, placing CSS after JavaScript does not hurt performance and can provide gains in certain circumstances. Putting scripts first does not affect performance on the majority of mobile browsers. However, it is important to take into account the specific target audience and browser support when making this decision.

The above is the detailed content of Should CSS Come Before or After JavaScript in Modern Web Development?. For more information, please follow other related articles on the PHP Chinese website!