It’s been no secret in the industry that reducing HTTP requests helps to speed up the web, and it becomes even more important when optimizing for mobile. Every request that a mobile device makes is a relatively slow process for the device and the network it’s pulling from. Luckily jQuery Mobile took all of this into consideration when they developed the foundation for the framework’s pages and navigation architecture.
First let’s boil it down to the simplest form: A webpage contains links to other webpages. When a user clicks a link the browser performs an HTTP request for the next webpage. Easy peazy. What’s great about jQuery Mobile is its ability to reduce some of these requests, which ultimately speeds up the user’s experience. There are a few different tricks up jQuery Mobile’s sleeve that helps perform this magic.
The multi-page template is basically having one HTML file which contains many “pages” inside of it (not to be confused with having multiple files, instead its one file with multiple pages represented within the file). This architecture is great for reducing HTTP requests because you’re essentially getting all of the webpages in one request, compared to many little requests.
Due to HTTP’s use of TCP slow-start and the overhead involved of firing off a new request, often times requesting one larger file can be more efficient than requesting many small files. Additionally, because all of the pages are pre-loaded, any subsequent page view will not have to make a new request and the experience will likely appear faster.
A benefit to jQuery Mobile’s navigation system is that it builds off of HTML standards for increased backwards compatibility. Just like with vanilla HTML, you can use links to skip to different parts of the same page, such as:
<a href="#info">More info</a>
Notice how the
href starts with a
# character. In this example, when clicking this link the browser will jump to the element in the same page with the
id attribute “info”. Note how its going to an element of the “same page”, and not requesting a new one. Taking it one step further, jQuery Mobile is able to enhance the webapp so it appears to the user that they’ve navigated to a completely separate page, but with the added benefit of a quick response time.
While all of this sounds great, it still has its limitations. Because every page has been loaded with one request, this means your browser is having to hold all of that information in memory. While holding many HTML elements within the DOM is certainly possible, the extra weight takes a significant amount of resources and slows down the browser (especially for low performing mobile devices).
In general, if you have a relatively small collection of webpages in your webapp then the multi-page template may be a great option, but keep a watchful eye on performance as your webapp grows.
While the previous multi-page template placed all of the pages into one file, as you guessed it, the multi-file architecture separates each page to its own HTML file. Having separate files for each page is probably the approach most developers are familiar with. Simply put: multi-file has the multi-page beat by its ability to navigate a large amount of pages.
Following the same theme for backwards compatibility, jQuery Mobile’s framework allows links to operate the same way as how plain Jane HTML works, such as:
<a href="page2.html">Page 2</a>
From this point, jQuery Mobile “progressively enhances” the navigation between pages. For example, instead of going directly to the next page using a standard browser request, jQuery Mobile requests the next page using AJAX, and once loaded, inserts the new found content into the DOM. This method of fetching pages via AJAX is important to maintain that “app-like feel” as pages transition from one to the other.
The framework is able to remember previously requested pages, and keeps them stored for future and quick use. Moreover, “prefetching” pages is also possible by including the
data-prefetch attribute within
<a> elements. An advantage of prefetching pages is that users will not have to see the “loading” dialog between pages.
Do note that the framework has a limit to how many pages can be stored by the caching system. But in the end jQuery Mobile is able to reduce HTTP requests without any additional coding on the developer’s part.
However, like the multi-page templates, the multi-file architecture also has its limitations too. Since each page requires a separate request, and if a page hasn’t already been cached, transitions may not be as smooth as each page loads.
Quick advantages to jQuery Mobile is its ability to reduce HTTP requests, but right from the start its important to decide which method to use. Sadly there is no magic number of when to use the multi-page template and when to use the multi-file architecture, largely because there are too many variables dependent on each webapp.
The general rule of thumb is:
- Small number of pages: multi-page template
- Large number of pages: multi-file architecture
- Keep your pages lightweight and minimize the number of HTML elements to improve performance
Hopefully this has helped to understand the advantages and disadvantages to each, but also how they’re able to reduce requests. And as always, test it out and experiment with the two different methods to see which one works best for you and your webapps.
Adam Bradley is a developer for Codiqa, which is a powerful drag-and-drop builder for creating cross-platform mobile apps and websites, built by Drifty Co. He is also the founder of CDN Connect, which is a tool to automatically optimize and reduce image file sizes, resize and crop images, and automate deployments of static files to a CDN. Swing by and say hello on twitter.