Menu
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?
394
jquery-mobile Getting started with jquery-mobile Setup Create a library (or lib) folder inside of your application (inside the www folder). Create a jquery-mobile folder inside the lib folder (I've named mine jqm). Place all of the jquery-mobile files that you have extracted inside of the jquery-mobile folder.
The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions.
A page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header" , class="ui-content" , and data-role="footer" .
Every tablet and smartphone in the world today is supported by jQuery Mobile, including browsers such as iOS, Android, Chrome, Firefox, BlackBerry and Symbian and native platforms such as Apache Cordova (PhoneGap).
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.
186
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:
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.
42
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
