CODEWITHSUNDEEP
jqueryperformancejquery-mobile
James Newton-King
James Newton-King

Reputation: 49052

Where should scripts be located in a jQuery Mobile page for best performance?

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?

Upvotes: 17

Views: 3513

Answers (3)

naugtur
naugtur

Reputation: 16915

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.

Upvotes: 3

Elzo Valugi
Elzo Valugi

Reputation: 27876

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.

Upvotes: 2

dubbelj
dubbelj

Reputation: 1160

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.

Upvotes: 4

Related Questions