17

Most people recommend scripts tags be placed at the bottom of the page for performance reasons - jQuery: Move JavaScript to the bottom of the page?

How does this practice apply to jQuery Mobile web pages?

Examples I have seen place jQuery and jQuery Mobile scripts in the head tag. Should other scripts be placed in the head tag as well? What is best practice?

Improve this question
2
  • 1
    Nice question, are the amount of http requests king here? I have seen some sites include the js & css in the page rather than external resources. I also think it will differ wildly depending on the device but it would be good to have some stats across all platforms. Commented Nov 13, 2010 at 14:03
  • @James Newton-King, finally how do you do? I before always put the js to bottom, but today I found looks like put it to bottom, the loading icon not display.(first display is very ugly, and changed to JQuery mobile style). I don't know is that because the js location problem, can you tell me you finally choice please? Thanks Commented Mar 21, 2014 at 6:40

3 Answers 3

Reset to default
4

Here, i think the same answer counts as for desktop pages. If the javascript is vital for the page functionality you put it at the top. If it's complementary, you place it at the bottom.

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

Comments

3

While this might not be related to performance as speed, it is important in the jquery mobile context that you properly add scripts to pages. Plain old $(function(){}) will surprise you. It doesn't work in some cases.

When a link is clicked jquery mobile fetches the page with ajax and adds its content to the currently open page ignoring everything you put in the <head>. [This is true as of jqm 1.0a2]

There are two ways of adding scripts that will work:

  1. putting all scripts in a single .js file and link them in the head of all pages of your app and work with events that jqm provides (pageshow and pagecreate ones).
  2. putting scripts at the bottom of the body and NOT require DOMready to fire.

The second way might be better for performance in big applications, where there are a lot of scripts that the user might not use (not visiting certain pages). I would recommend the first way - it's cleaner and jqm seems to encourage it.

A hybrid of both might be what's best - adding a pageshow event handler thet would trigger some default function from each loaded page.

[edit]

see Limitations here at the bottom of the page.

Improve this answer

Comments

2

Best practice is on the bottom. usually jquery script are executed when DOM is loaded so being down on the page has no effect on display, but it does have an effect on speed, as it will allow other elements to load previously.

Improve this answer

2 Comments

how does this compares to the upcoming html5 standard ?
I am not 100% sure but I dont think any of this change for HTML5

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.