CODEWITHSUNDEEP
javascripthtml
Bin Chen
Bin Chen

Reputation: 63299

Browser loading strategy, <head>...<body>

I am inspecting some interesting behaviors of browser, I don't know it's in standard or not. If I put everythin inside <head></head>, the browser will only begin to render the page after all the resouces in head is retrieved.

So I am thinking that put as little as possible things into head is one of the important website optimization techniques, is it right? My question is:

If I put script/css in body or other parts of the html, how can I know that script has been loaded successfully so that I will not be calling a undefined function?

Upvotes: 2

Views: 714

Answers (1)

Seldaek
Seldaek

Reputation: 42026

To answer shortly: You should really put the script tags at the very end of the <body> element. Style tags should be put in <head>, otherwise the document will have to be re-rendered every time a new stylesheet is loaded, so you really want them all to be loaded before the document starts rendering.

As for using javascript code that is not loaded yet. Of course you shouldn't bind any events or anything too early, and shouldn't have inline javascript in the page ideally. The solution can be to just use the window onload event to do your initialization, if you really must have inline code in the page.

Upvotes: 2

Related Questions