Should CSS Always Precede JavaScript in HTML?-CSS Tutorial-php.cn

Should CSS Always Precede JavaScript in HTML?

Patricia Arquette

Release： 2024-11-24 19:06:17

Original

798 people have browsed it

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: