CODEWITHSUNDEEP
javascriptcsshtml
kjo
kjo

Reputation: 35311

Is ordering of <link rel="stylesheet" ...> and <script ...> tags significant?

(I apologize if this is an extremely basic question. I'm a bit of an HTML noob.)

In HTML5, is the relative ordering within the <head> element, of elements having the form <link rel="stylesheet" type="text/css" ...> and elements having the form <script ...></script> at all significant, either semantically or performance-wise (or in some other way)?

For example, assuming a (possibly mythical) "fully HTML5-compliant browser", are there situations in which the following two snippets would produce "different results" (i.e., different appearance, or noticeable different performance, or different behavior, etc.)?

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" type="text/css" href="foo.css"/>
    <script src="foo.js"></script>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>


<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <script src="foo.js"></script>
    <link rel="stylesheet" type="text/css" href="foo.css"/>
    <!-- ... -->
  </head>
  <!-- ... -->
</html>

(<!-- ... --> denotes code that is both correct and common to both cases. IOW, the only difference between the two cases is the ordering of the <link...> and <script>...</script> elements within the <head>...</head> element.)

Upvotes: 17

Views: 14003

Answers (7)

Duncan
Duncan

Reputation: 1550

Only one I can think of is the meta tag for IE...

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

For IE to make use of that one, it has to be the first item in the head (AFAIK)...

Upvotes: -1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

In the general case, the order should be assumed to be significant. Because it can be. JavaScript code may, for example, try to access a link element, and then it matters whether the link element appears before the script element (in which case it exists in the DOM when the script is executed).

Upvotes: 1

Ashwani
Ashwani

Reputation: 3481

To increase the performance of html page load, it is recommended that you use Javascript tag in the end of the body and css rule in the head. Precedence need to be maintain when other script or css is referenced in one of the file which should be there before the file which is referencing it.

We can consider a simple example that. jquery.js file always be at top of the othes js files because, other files rely on that jquery file.

It should be noted that scripts are interpreted, so there ordering is important.

Upvotes: 1

MikeM
MikeM

Reputation: 27405

for performance, CSS first then JS...(but JS yields best performance at the end of the markup as noted in some of the other answers)

stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.

quote from Optimize the order of styles and scripts (from Google's "Make the Web Faster" Best Practices docs)

Upvotes: 11

Prasanna Aarthi
Prasanna Aarthi

Reputation: 3453

It is always better you include style sheet in the header and the scripts at the bottom because, users have to wait till the JavaScript finishes loading, tags block parallel downloads.

please look the following links\ Is the recommendation to include CSS before JavaScript invalid?

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

In terms for performance... include CSS files in the header and js files at the bottom of the page...

In terms of order the order of css files and js files matter... in css file if the same rule is present in multiple files the later once will get precedence... in js file the depended files should be included first

Upvotes: 4

tobi.at
tobi.at

Reputation: 1286

No, there is no difference.

The only thing you should consider is putting your <script> tags at the bottom of the <body>. For more information regarding this issue read this article by Yahoo.

Upvotes: 1

Related Questions