1

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.

Improve this question

6 Answers 6

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Will work it equal as now? I mean, no changes in code to work? And will it speedup the loading?. I will check your link
@Biribu: It speeds up the apparent page load. The browser can show the content to the user, and the user can start to look at it, while the scripts are being downloaded.
3

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)
Improve this answer

Comments

2

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/

Improve this answer

3 Comments

Thanks man. I gave you a +1 since I can't set more than one answer as correct
"Browsers load HTML and any embedded resources synchronously as they parse the HTML." That's incorrect. Images and stylesheets are loaded asynchronously. It's just JavaScript files that are loaded synchronously as the page is parsed (unless they have defer or async attributes on the script tag and the browser supports that). The reason it's synchronous is to support using document.write and to ensure script load order.
"If you use the jQuery.ready() method of loading JS...This is in effect even better than placing tags at the bottom of the page." Better how? I'm not seeing it (other than when you need to have logic choosing which scripts to load, such as demand-loading shims). Moreover, by removing the script tags and putting it in code, you interfere with the browser's ability to use lookahead and prefetch scripts. (Browsers are quite sophisticated about how they load resources, including using lookahead and prefetch.)
1

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.

Improve this answer

Comments

1

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.

Improve this answer

1 Comment

Rather than repeating someone's answer, it's much better just to upvote it.
-2

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.

Improve this answer

1 Comment

In terms of downloading the web page, where you put the JS does play a big part...it's strongly recommended that you place the JS at the end of your files. The reason for jQuery's document ready is actually partially to accommodate that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.