Xiaoqiang's HTML5 mobile development path (51) -- Improving page access speed in jquerymobile

When developing with jQuery Mobile, you can select single-page templates and multi-Page Templates. When using single-page templates, You need to request from the server when you jump from one page to another, the user will feel a slight pause. Using a multi-page template can improve the smoothness between page jumps. However, multiple pages must be downloaded at one time. Therefore, the download duration is longer and the user experience is also affected.

In the Development Based on prefetch technology, when the DOM object on the first page is loaded, jQuery Mobile performs prefetch on the link address marked with data-prefetch. The detailed process of prefetch is as follows:

Note: when using the prefetch function, we do not recommend that you add the data-prefetch attribute to all links. because too many data-prefetch attributes cause excessive pages to be prefetch by mobile devices, the loaded DOM object is too large, causing memory consumption on the mobile phone. Some Mobile Phones run slowly or even crash.

To effectively save memory resources of browsers on mobile devices, pages that are not marked with cache will be cleared when accessing the next page.

If you do not want to clear the cache of the previous page in the browser, you can add data-DOM-cache = "true" to the corresponding dom object. In fact, there is a better way, use the HTML5 Offline Application function to cache page content locally.

The sample code is as follows:

<! DOCTYPE html> PrefetchPage01.html


<Section id = "page_PageTransition2" data-role = "page"> PrefetchPage02.html


<! DOCTYPE html>