ถัดไป ก่อนหน้า

3.1 Pages & dialogs

       j. Prefetching & caching pages
   เป็นแนวความคิดที่ดีที่จะเก็บ app ของหน้าเพจในหลายๆหน้า templates เดียวแทนที่ของการเก็บแบบหนึ่งหน้าใหญ่มีหลายหน้า template จะช่วยลดขนาดของหน้า DOM เมื่อใช้หนึ่งหน้า templates คุณสามารถ prefetch หน้าใน DOM
   การ prefetch page สามารถเพิ่ม attribute data-perfectch ที่ link จะเป็นตัวชี้ไปที่ หน้าเพจ
   jquery mobile เมื่อโหลดหน้าเพจหลังจากเพจหลักมีการโหลดและสร้างหน้าเพจเพื่อเรียก event

ตัวอย่างเช่น

<a href="prefetchThisPage.html" data-prefetch> ... </a>

   คุณยังสามารถ prefetch ของ link หน้าเพจได้เท่าที่ต้องการ โดยการเพิ่ม data-prefetch ใน link ทั้งหมดที่ต้องการ prefetch หรือคุณสามารถ prefetch หน้าโปรแกรมโดยใช้ $.mobile.loadPage();

ตัวอย่าง

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

   AJAX จะโหลดข้อความขึ้นมา ถ้าหาก framework prefetching หน้าเพจยังไม่เสร็จตามเวลาการ link การ prefetch หน้าเพจ โดยธรรชาติแล้วจะสร้างการร้องขอการเพิ่ม HTTP และ ใช้งาน bandwidth ดังนั้นควรใช้ feature นี้เฉพาะในสถานการณ์ที่เป็นไปได้สูงในการเข้าถึง prefetched หน้าเพจ    โดยปกติ photo gallery สามารถที่จะ prefetch previous และ next รูปภาพในหน้าเพจ ดังนั้นผู้ใช้สามารถเคลื่อนย้ายระหว่างรูปได้อย่างรวดเร็ว

การจัดการขนาดของ DOM (DOM size management)
   สำหรับการเปลี่ยนการ action ที่ทำงานในหน้าเพจควรเปลี่ยน from และทั้งสองต้องเกิดใน DOM อย่างไรก็ตามการเก็บหน้าเดิมใน DOM จะเพิ่มในหน่วยความจำของ บราวน์เซอร์อย่างรวดเร็วซึ่งสามารถทำให้บางเบราว์เซอร์ของมือถือทำงานช้าหรือผิดพลาดได้
   jQuery Mobile จึงมีวิธีการเพื่อให้ง่ายในการจัดเรียงใน DOM เมื่อใดก็ตามที่โหลดหน้าเว็บผ่าน AJAX jQuery Mobile หน้าเพจจะค่อยๆถูกลบออกจาก DOM หลังจากออกจากหน้าเพจ(เทคนิคในกรณีที่ pagehide)

หน้าแคชใน DOM(Caching pages in the DOM)
   คุณสามารถบอกกับ Jquery mobile เก็บหน้าเพจเข้าชมก่อนหน้า ใน DOM แทนการลบออก สิ่งนี้จะช่วยให้แคชกับหน้าเพจ เพื่อให้ใช้งานได้ทันทีเมื่อผู้ใช้กลับมายังหน้าเพจ
   การเก็บการเข้าชมหน้าเพจก่อนหน้าใน DOM สามารถ set ค่าตัวเลือก domCache ที่ plugin จริง บนหน้าเพจ
ตัวอย่างเช่น

$.mobile.page.prototype.options.domCache = true;

หรือ หากการแคชที่เฉพาะเจาะจงหน้าเพจ สามารถ เพิ่ม data-dom-cache="true" ที่ attribute ของเพจ
ตัวอย่าง

<div data-role="page" id="cacheMe" data-dom-cache="true">

หรือแคชหน้าเพจผ่านโปรแกรม
ตัวอย่างเช่น

pageContainerElement.page({ domCache: true });