CODEWITHSUNDEEP
javascriptjqueryhtmlperformance
Biribu
Biribu

Reputation: 3823

Where to load javascript scripts in html page

I am developing a jquery page and I think it is a little bit slow when you load it because I load all js files at the begining.

Would it be faster if I load just which I need at the begining and in each section, loads which I need?.

Now my webpage has all script calling in and after that, in all sections, home, page2, page3...

I structurated the webpage in one html file and I navigate to each section. Each section is like this: 

<div data-role="page" id="secion2" data-theme="e">
<!--<script type='text/javascript' src='javascript/createFbAlbums.js'></script> -->
**LOAD SCRIPTS HERE**
<div data-theme = "f" data-role="header" data-id="fixedNav" data-position="fixed">
    <h1>Page 2</h1>
    <a href="#home" data-icon="home" data-iconpos="notext"></a>

</div> <!-- /header -->
<div data-role="content">
     <ul data-role="listview" data-inset="true" class="managementEvents">   
        <li data-theme = "f"><a href="#expositivo">Page2</a></li>
        <li data-theme = "f"><a href="#page3">Modify Exposiciones</a></li>
    </ul>        
</div> <!-- /content -->

Loading them in sections like the commented in this piece of code. Is this equal to load at the begining or not?

Or doing something like this inside javascript: 

$(document).on("pageinit", '#section2', function(){
**LOAD HERE SCRIPTS**
Javascript code here doing everything in that page
});

I am a little bit lost because I don't know if this is ok or will break the page or will not speedup the loading.

Upvotes: 1

Views: 675

Answers (6)

T.J. Crowder
T.J. Crowder

Reputation: 1074008

The usual recommendation (for instance, in YUI's Best Practices for Speeding Up Your Web Site) is that unless you have a good reason to do something else, put your scripts at the very end of the page, just before the closing </body> tag:

<p>Content</p>
<div>More content</div>
<script src="/some/script.js"></script>
</body>
</html>

Side note: This also makes it essentially unnecessary to use jQuery's ready feature. If the script is at the very bottom of the page, all of the elements defined by the markup above it are available for scripting.

There's lots more useful advice in the page linked above. For example: To the extent possible, combine all of your scripts into a single file. (And make the file cachable, etc., etc.)

The downside: If you have content on your page that requires JavaScript to work correctly, the above means that the events related to that won't be hooked up right away. There can be a brief window of time between the content being available to the user, and the event handlers being registered. To deal with that, the concept of "progressive enhancement" comes into play: Make things work well without JavaScript, and then make them work better with JavaScript. Things that just can't work without JavaScript should be added by the JavaScript, or loaded initially-hidden and then shown by the JavaScript.

Upvotes: 4

user3203214
user3203214

Reputation: 29

Yes as everybody mentioned, it won't hurt putting the scripts at the bottom of page before </body> tag whereas it might create a problem sometime when you put the script in the head tag.

Upvotes: 1

Esser
Esser

Reputation: 540

It would really be unnecessary to put your script at the end of your HTML if you use $(document).ready(function(){ then add your code, and close it with }) it will have the same effect, although both methods are considered good programming practice.

Upvotes: -2

Dmitriy Khaykin
Dmitriy Khaykin

Reputation: 5258

The recommendation is to put JavaScripts at the bottom of the page. This does not take into account dynamically loading your scripts, however, because there are differences in how browsers actually handle downloading external resources such as JS files between using tags and dynamically loading via JavaScript DOM manipulation.

Further Explanation

Browsers load HTML and any embedded resources synchronously as they parse the HTML. This means that as your page loads, when you have scripts up front, the loading of the page stops, the browser makes a request to download, then parse and evaluate/execute the JavaScript file, and then continues to load the rest of the HTML. It does this with each script.

Therefore, unless there are crucial elements that need to use some JS functions or variables during page load, and in some cases this is needed, it's better to load the JS at the bottom of the page because your page will render quicker. And in those crucial cases, only load enough JS to get the page load done as quick as possible.

As an interesting aside, loading JS files dynamically using JavaScript itself (i.e., dynamically inject script objects via javascript after page load), those scripts will load asynchronously and further improve page load times.

So to answer your question,

If you use the jQuery.ready() method of loading JS, it conforms to a best practice since the scripts will load after the page has already been loaded by the browser. This is in effect even better than placing tags at the bottom of the page.

$(document).ready(function () {
    $.getScript( "yourScript.js" )
});

(Full example for jQuery getScript can be found here for more in-depth examples: http://api.jquery.com/jquery.getscript/

Upvotes: 2

Felix
Felix

Reputation: 38102

You should always put your scripts at the bottom of your page before closing </body> tag

Refer here for more informations why you should do it.

Upvotes: 1

DA.
DA.

Reputation: 40663

Whenever possible, JS files should be loaded at the bottom of the page. Prior to the closing body tag.

http://developer.yahoo.com/performance/rules.html#js_bottom

The reason is that JS files loading can block parallel downloads of other page assets. So they can cause a bottleneck.

In addition to that advice, since you're using jQuery, load jQuery from a CDN such as Google. There are a couple of benefits to doing that:

  • a popular CDN such as Google increases the odds that the end-user has already cached the JS library
  • it further reduces the parallel downloading bottleneck as it's another domain (the bottleneck is per-domain)

Upvotes: 3

Related Questions