Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Mobile - all pages in index.html vs. single external pages - What gives better performance?

Tags:

"The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page." jQuery docs

What gives better performance for a jQuery Mobile application - which runs on PhoneGap?

  • all pages in a single.html file and internal loading
  • either single pages with external links

Any other aspects to consider?

like image 1000
Michael Schmidt Avatar asked May 06 '11 21:05

Michael Schmidt


People also ask

How do you include multiple pages in the single jQuery Mobile document explain with an example?

Multiple pages can be included in the single jQuery mobile document which loads together by adding multiple divs with the attribute data-role = "page". The div with data-role = "page" should consist unique id to link internally between the pages.

What is basic structure of jQuery Mobile page?

Inside the body: Pages 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-roles of "header" , "content" , and "footer" .

What is jQuery Mobile page?

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.

What is content in jQuery Mobile?

The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets — such as collapsible panels and multiple-column grid layouts — to make it easy to format your content for mobile devices. Basic HTML styles. Layout grids (columns)


1 Answers

I use jQuery mobile, and all the sites that I've made have been one page sites. The only external pages that I create are those that have embedded Google maps, just so the iframe loading doesn't happen if the user doesn't need it.

I think it boils down to this: one page with lots of content may slow initial loading but will be snappier once loaded, whereas a tiny home page will be quick from the start, buteach linked page will trigger an Ajax request. When designing for mobile, my rule of thumb is to minimize http requests as much as possible. Though many users are on 3+ G networks, it can still be a wait depending on connectivity. Also, connectivity can change in an instant and if the user has been navigating through the site successfully, and all of sudden things slow down to a crawl, this may create a bit of frustration. Therefore, I think from a user experience POV, users are willing to wait a few extra ticks on the initial load if everything else is quick once it's loaded.

Designing all in one page is also good for development with jQM, imo, because I just create a cache-manifest that includes only one page (and the css and js files). Then my site is cached and runs even if the user has no connectivity. If you've worked with applicationCache, you quickly realize that the more files you have, the more difficult it is to maintain the cache manifest and updates are slower.

like image 84
ampersand Avatar answered Oct 12 '22 22:10

ampersand