As JavaScript in blocks HTML rendering, and it's good practice to keep JavaScript at bottom, just before closing body tag , is it not the case with CSS also?
I know we can't keep external CSS outside .
views:
64answers:
5
A:
Why would it be a good practice to keep Javascript at the bottom?
I'd say that it's best practice to put CSS as well as Javascript in separate files and include them in your HTML document using the <head> section.
Rhapsody
2010-10-26 17:23:53
Because JavaScript blocks additional loading -- see: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
Sean Vieira
2010-10-26 17:25:16
That's a three year old source you're posting. In the mean time a lot has changed. Especially with the javascript engines.
Rhapsody
2010-10-26 17:31:40
`<script>` in the head still blocks the parser, though. It has to, it doesn't know you didn't use `document.write` in there. (Firefox and Chrome, iirc, do do speculative loading ahead of a script now, but that's only a partial fix.)
Zack
2010-10-26 19:39:27
+3
A:
CSS does not block in the same way JavaScript does
To quote Yahoo's Developer Network Blog
With stylesheets, progressive rendering is blocked until all stylesheets have been downloaded. That’s why it’s best to move stylesheets to the document HEAD, so they get downloaded first and rendering isn’t blocked. With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.
In addition, when CSS is added to the head, it is parsed first, and results in the HTML being styled even as it is downloaded. This avoids the Flash Of Unstyled Content that happens if you place style tags at the bottom of a large page of HTML.
Sean Vieira
2010-10-26 17:24:14
A:
No, css is apply to DOM element right after the browser read the css.
In case of javascript you can keep the script at read, since you make it run after all html loads, like:
window.onload = function (){
//here we start
}
madeinstefano
2010-10-26 17:24:50
This is good practice but does not stop `<script>` in the head from blocking subsequent loading and parsing, because the browser doesn't know that you didn't use `document.write`. You can use `<script defer>` to promise not to do anything with side-effects, but I've had problems with that, like a chain of script loads being executed out of order (e.g. the jQuery ui widget gets parsed before jQuery itself - badness ensues).
Zack
2010-10-26 19:37:48
In my apps I usually don't write any javascript on html files, only on js files. And with some control like $(function (){}) or the example above I never had that loading before dom issue.
madeinstefano
2010-10-28 01:18:04
+2
A:
Not only does CSS not block the way Javascript does, but also some browsers will do strange things if you put CSS anywhere but the <head>, like ignore it, or apply it incompletely. HTML5 actually prohibits <style> from appearing outside <head> (except with the "scoped" feature, which AFAIK nobody implements yet).
Zack
2010-10-26 17:27:34
A:
CSS stylesheets are loaded using the <link> element, this element is only valid when it is in the head of the document. As for CSS blocking HTML rendering, this isn't the case because the CSS is applied once the browser is loaded just like the other <link> elements. JS blocks HTML because the browser assumes the JS wants to take control and actually do something before loading the DOM fully, basically JS is executed and then left alone.
Think about it, if CSS was loaded the same as JS, no element would be styled because it would be referring to elements not yet loaded, therefore it is applied afterwards and doesn't block loading.
Tom Walters
2010-10-26 17:27:56