Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
Should CSS always take precedence over JavaScript?
Home Web Front-end CSS Tutorial Should CSS Always Precede JavaScript in HTML?

Should CSS Always Precede JavaScript in HTML?

Patricia Arquette
Patricia Arquette
Nov 24, 2024 pm 07:06 PM

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:

Related knowledge
A Comparison of Static Form Providers A Comparison of Static Form Providers Apr 16, 2025 am 11:20 AM

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML

A Proof of Concept for Making Sass Faster A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM Apr 17, 2025 am 10:55 AM

In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves

Some Hands-On with the HTML Dialog Element Some Hands-On with the HTML Dialog Element Apr 16, 2025 am 11:33 AM

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

Paperform Paperform Apr 16, 2025 am 11:24 AM

Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but

Where should 'Subscribe to Podcast' link to? Where should 'Subscribe to Podcast' link to? Apr 16, 2025 pm 12:04 PM

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

It's All In the Head: Managing the Document Head of a React Powered Site With React Helmet It's All In the Head: Managing the Document Head of a React Powered Site With React Helmet Apr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

Options for Hosting Your Own Non-JavaScript-Based Analytics Options for Hosting Your Own Non-JavaScript-Based Analytics Apr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

See all articles