What are the pros and cons of adding – Wesley Murch Mar 30 '11 at 21:04

Question

I guess one advantage I could think of would be if you use these scripts on multiple pages, you only have to remember to include one script, and it saves some space.

score 2 · Answer 1 · answered Mar 14 '11 at 18:19

2

I guess one advantage I could think of would be if you use these scripts on multiple pages, you only have to remember to include one script, and it saves some space.

answered Mar 14 '11 at 18:19

arnehehe

1,386
1
17
33

score 2 · Answer 2 · answered Mar 27 '11 at 12:14

At Google PageSpeed, they highly discourage you from using this technique, because it makes things slower. Apart from the sequential loading of your script.js before all the others, there's another catch:

Modern browsers use speculative parsers to more efficiently discover external resources [...] Thus, using JavaScript's document.write() to fetch external resources makes it impossible for the speculative parser to discover those resources, which can delay the download, parsing, and rendering of those resources.

score 2 · Answer 3 · answered Mar 27 '11 at 13:42

It's also possible that this was written as a recommendation by an SEO firm to make the head element shorter if possible, so unique content is closer to the top of the document - also creating a higher text-to-HTML ratio. Though it does sound, all-in-all, like not a very good way of doing this; though it would make maintenance more time-consuming, a better approach would probably be to condense javascript into a single .js file and css into a single .css file, if it were deemed utterly necessary to reduce head element size.

score 1 · Answer 4 · answered Mar 27 '11 at 14:40

A great disadvantage is that adding scripts into head will pause the processing of the document until those scripts were completely downloaded parsed and executed (because the browser thinks they may use document.write). - This will hurt responsiveness.

Now days it is recommended that you put your script tags right befo </body>. Of course this is not possible 100% of times, but if you are using unobtrusve Javascript (as you should), all scripts can be respositioned at the end of the document.

HTML5 came up with the async attribute which suggests the browser only to execute the scripts after the main document has been loaded. This is the behaviour of script-inserted scripts in many browsers, but notin all of them.

I advise against using document.write at all costs. Even without it, this results in one extra request towards the server. (We like to inimze the number of requests, for example with css sprites.)

And yes, as others mentioned earlier, if scriping is disabled your page will be shown without CSS (which makes it potentially unusable).

score 0 · Answer 5 · answered Mar 26 '11 at 23:09

0

If JavaScript is disabled - <script> and <link> elements won't be added at all.
If you place JavaScript init functions at the bottom of your page (which is a good practice) and link CSS with JavaScript, it may cause a some delay before CSS loads (broken layout will be visible for a short time).

answered Mar 26 '11 at 23:09

Scherbius.com

3,396
4
24
44

With respect to 1 - that's part of the point! Any JavaScript and CSS which is required only when JS is enabled aren't present in the document unless JS is enabled. – Richard JP Le Guen Mar 27 '11 at 01:17
... and with respect to 2, in the question the JS is explicitly in the document ``. – Richard JP Le Guen Mar 27 '11 at 01:18
if js library contains self-init (which is a bad practice) - then point 2 is out of the question. – Scherbius.com Mar 27 '11 at 08:08
with respect to 1 - what I meant is: users with JS off won't have CSS linked either. – Scherbius.com Mar 27 '11 at 08:10
Yes they will have CSS links: they will have `` which is not added with JavaScript. If they don't have JS they don't need any others. What do you mean by self-init? – Richard JP Le Guen Mar 27 '11 at 12:03