Is ordering of <link rel=“stylesheet” …> and <script …> tags significant?
Question
(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" (ie, 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.)
7 answers
solution1
7 ACCPTED 2013-08-26 16:55:38
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)
solution2
3 2013-08-26 16:50:50
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
solution3
1 2013-08-26 16:50:20
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 .
solution4
1 2013-08-26 16:52:54
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?
solution5
1 2013-08-26 16:57:27
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.
solution6
1 2013-08-26 17:13:41
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).
solution7
-1 2013-08-26 17:14:47
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)...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.