Menu
(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.)
535
Script tags are executed in the order they appear It also means scripts which appear later on the page can depend on things scripts which appear earlier have done. Elements on the page won't render until all the script tags preceding them have loaded and executed.
CSS Order Matters In CSS, the order in which we specify our rules matters. If a rule from the same style sheet, with the same level of specificity exists, the rule that is declared last in the CSS document will be the one that is applied.
To be a front end developer, you'll need to be proficient in all three of these languages, as they are constantly working together. Ideally you'll learn HTML first, then CSS, and then finish with JavaScript, as they build on each other in that order.
The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled.
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)
155
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
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
