標籤：jquery mobile html5 預取 緩衝
在使用jQuery Mobile進行開發的時候可以選擇單頁模版和多頁模版，在使用單頁模版的時候從一個頁面跳轉到另一個頁面的時候需要從伺服器請求，使用者會感到略有停頓。使用多頁模版，可以改善頁面跳轉之間的流暢性，但是多個頁面要一次性下載，所以下載時間變長，使用者體驗也會受到影響。
在基於預取技術的開發中，當第一個頁面的DOM對象載入完成後，jQuery Mobile會對標記data-prefetch的連結地址進行預取操作。預取的詳細過程如下：
注意：使用預取功能時，不建議給所有連結都添加data-prefetch屬性，因為過多的data-prefetch屬性導致行動裝置需要預取的頁面數量過多，載入的DOM對象過大，導致手機記憶體消耗，部分手機運行緩慢甚至崩潰。
為了有效節省行動裝置瀏覽器的記憶體資源，對於沒有標記緩衝的頁面，在訪問下一個頁面的時候將被清理掉。
如果不想清理掉之前頁面在瀏覽器中的緩衝，可以在相應的DOM對象上添加data-dom-cache="true",其實還有一個更好的方法，通過HTML5的離線應用功能將頁面內容緩衝在本地。
相關範例程式碼如下：
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script></head><body><div id="page_PageTransition" data-role="page" data-dom-cache="true"><header data-role="header"><h1>預取頁面處理</h1></header><div class="content" data-role="content"><p>這段示範將呈現採用與不採用預取技術的兩種頁面切換方式。</p><a href="PrefetchPage01.html" data-prefetch>採用預取技術的頁面</a><br/><a href="PrefetchPage02.html" rel="external">傳統的頁面跳轉實現</a></div></div></body></html>PrefetchPage01.html
<section id="page_PageTransition2" data-role="page"><header data-role="header"><h1>頁面跳轉</h1></header><div class="content" data-role="content"><p>跳轉到經過預取技術的頁面</p></div></section>PrefetchPage02.html
<!DOCTYPE html><html><head><title>練習</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/><script src="js/jquery-1.6.4.js" type="text/javascript" ></script><script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script></head><body><section id="page_PageTransition3" data-role="page"><header data-role="header"><h1>頁面跳轉</h1></header><div class="content" data-role="content"><p>跳轉到傳統的JQuery Mobile頁面</p></div></section></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
