When working with the jQuery Mobile first thing to think about is what kind of page template should I use. I have already talked a little bit about this topic in one of my previous posts . Now I have a want to clarify this part of a story a little bit more.
To make a story short (I am not going to talk about page architecture, everything you need to know can be found in a previous link).
Multi HTML page template
This template is where one jQuery Mobile page is placed inside a single HTML page.
- Smaller and lighter, each data-role=”page” is inside a separate HTML file and page structure is much more modular.
- DOM size is relatively small. The only first page is permanently loaded into the DOM. Any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
- Consumes more bandwidth as each page navigation generates a new request. When moved from every page will be permanently removed from the DOM, unless caching is turned on.
- Navigating back to a previously loaded page will again generate a fresh request.
- Initial page load is fast, but subsequent page loads are slower than in a multipage template. This can cause problems during page transitions, more so on mobile devices. Desktop browsers don’t have this issue.
- Much more suitable for desktop browsers than mobile browsers. Also suitable for larger applications, again this is a problem for mobile devices.
- Pageinit event will be triggered each time page is visited (for those who don’t know this an event that replaces document ready in jQuery Mobile and thus it should run only once). Which consequently causes problems with multiple event binding.
- Can’t use more then one data-role=”page” inside any subsequent HTML page, only initial one can have more then one page.
This is a template where one or more jQuery Mobile pages are part of a single HTML file.
- Since all pages are already loaded; no additional requests are generated for navigating between pages.
- First load is slower as the file size is larger, but subsequent page navigation is faster, thus making transitions much more smooth. Almost native-like smooth, emphasize on almost.
- The “page” data-role element is required.
- Heavier. All the pages are in a single HTML file. Large applications with many pages will increase the DOM size.
- Multiple page containers are present, and only the first one is shown when page loads.
- Using data-ajax=”false” for internal pages ignores the data-transition attribute, by default slide is used
- Heavily styled pages can become sluggish on mobile devices.