When using jQuery Mobile for development, you can choose single-page templates and multi-page templates. When using single-page templates, when jumping from one page to another page, you need to request from the server, and the user will feel a slight pause. . Using multi-page templates can improve the smoothness between page jumps, but multiple pages need to be downloaded at once, so the download time becomes longer and the user experience will also be affected.

In development based on prefetching technology, when the DOM object of the first page is loaded, jQuery Mobile will prefetch the link address marked data-prefetch. The detailed process of prefetching is as follows:

Note: When using the prefetching function, it is not recommended to add the data-prefetch attribute to all links because too much data The -prefetch attribute causes too many pages to be prefetched on mobile devices, and the loaded DOM objects are too large, causing memory consumption on the phone, and some phones running slowly or even crashing.

In order to effectively save the memory resources of mobile device browsers, pages without tag cache will be cleared when accessing the next page.

If you don’t 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 to cache page content locally through HTML5's offline application function.

The relevant sample code is as follows:

	

		

			
预取页面处理
		
		

			
这段演示将呈现采用与不采用预取技术的两种页面切换方式。
			采用预取技术的页面

			传统的页面跳转实现
		

	

PrefetchPage01.html

	

		
页面跳转
	
	

		
跳转到经过预取技术的页面
	

PrefetchPage02.html

	

		

			
页面跳转
		
		

			
跳转到传统的JQuery Mobile页面
		

	

The above is Xiaoqiang's HTML5 mobile development road (51) - the content of improving page access speed in jquerymobile. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!