Should CSS Always Precede JavaScript in HTML?

Should CSS always take precedence over JavaScript?

Conventional Wisdom:

A common recommendation has long been to put CSS before JavaScript for the following reasons:

• Rendering The thread needs to render all the style information for the page.
• If JavaScript is included before, the JavaScript engine must parse everything before continuing to the next set of resources.
• This means that the rendering thread cannot fully display the page because it does not have all the styles it needs.

Actual testing:

However, actual testing showed very different results:

• JavaScript will not start executing, Until all CSS is downloaded.
• Therefore, it seems more efficient to include the JavaScript at the front because the JavaScript thread can run for a longer time.

Conclusion:

• For desktop browsers: In modern browsers, put CSS before JavaScriptwill not bring performance improvements. In some cases, it can even cause performance degradation (such as when CSS is delayed). Therefore, you should link to the external stylesheet ** after the JavaScript **.
• For mobile browsers: Evidence suggests that some mobile browsers (such as WebKit for Android) still do not do predictive parsing. On such browsers, placing scripts before CSS may cause a performance penalty.

Technical explanation:

• Historical browsers will stop parsing HTML when encountering the <script> tag, download the script and execute it it. When encountering <link>, it will continue to parse the HTML while obtaining the CSS file. </script>
• Modern browsers implement predictive parsing, where the browser "predicts" HTML and downloads resources, including scripts, ahead of time.

Browser support:

• Most modern desktop and mobile browsers (approximately 85%) support predictive loading.

Notes:

• If performance is not a concern on older browsers, putting the script after the CSS on desktop browsers is A wise choice.
• On mobile browsers, best practices may still vary by device and operating system.

The above is the detailed content of Should CSS Always Precede JavaScript in HTML?. For more information, please follow other related articles on the PHP Chinese website!