JQuery Mobile Tutorial : Components 05 - Prefetching & caching pages -

회사에서 해야할 Kurogo 관련 일을 이제 거의 끝마쳤습니다.

JQuery Mobile 쪽을 너무 오래 다루지 않은 것 같아서 지난번 글에 이어서 계속 Tutorial을 정리하겠습니다.

Prefetching pages

여러분 앱의 페이지들을 하나의 큰 템플릿에 보관하는 것 보다 조그만 여러개의 페이지 템플릿(single-page templates)으로 나눠서 보관하는게 더 좋은 생각입니다. 그렇게 하면 페이지의 DOM size를 줄일 수 있습니다.

single-page templates를 사용할 때 DOM에 대해 prefetch pages를 사용하실 수 있습니다. 그러면 유저기 그 페이지를 방문할 때 즉시 서비스를 할 수 있습니다. 페이지를 prefetch 하기 위해서는 link에 data-prefetch 속성을 추가하면 됩니다. JQuery Mobile은 그러면 primary page가 로드된 다음에  target 페이지를 background에서 로드합니다. 그리고 pagecreate event가 trigger 됩니다. 아래 예제가 있습니다.

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

여러분이 원하시면 원하시는 대로 linked page에 prefetch를 설정할 수 있습니다. 단지 링크에 data-prefetch 만 추가하시면 됩니다.

또한 $.mobile.loadPage():를 사용해서 프로그램적으로 페이지를 prefetch 하실 수 있습니다.

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

페이지를 prefetching 하는데에는 또다른 잇점이 있습니다. 유저가 이 prefetch된 페이지를 방문할 때는 Ajax 로딩 메세지를 안 보게 될 겁니다 Ajax 로딩 메세지는 prefetching이 끝나지 않았을 때만 나타날 겁니다.

Prefetching 페이지는 자연스럽게  추가적인 HTTP request를 생성하고 bandwidth를 사용합니다. 그러니까 페이지를 prefetching 하는 것은 자주 방문되는 페이지에 한해 사용하시는 것이 좋습니다. 일반적으로 previous, next 가 많이 사용되는 Photo Gallery 같은데 사용해서 유저가 사진을 보는데 좀 더 빠르게 화면에 표시하도록 만들 필요가 있을 때 사용할 수 있을 겁니다.

DOM size management

animated 된 화면전환을 위해서 화면전환이 일어나는 두 페이지가 모두 DOM 안에 있을 필요가 있습니다. 어쨌든 DOM 에 있는 이전 페이지를 계속 가지고 있으면 브라우저의 메모리를 차지하게 될 것이고 어떤 모바일 브라우저에서는 속도가 저하되거나 crash가 일어날 수도 있을 겁니다.

jQuery Mobile은 DOM에 작게 보관할 수 있는 간단한 메카니즘을 가지고 있습니다. Ajax를 통해서 페이지를 load 할 때마다 jQuery Mobile는 그 페이지를 flag 하고 나중에 그 페이지를 떠 날 때 DOM에서 remove 할 수 있도록 합니다. (기술적으로 말하자면 pagehide event 시 이 일이 일어 납니다.) 만약 유저가 remove 된 페이지를 다시 방문하면 캐쉬에서 그 페이지의 HTML 파일을 retrieve 할 겁니다. 만약 그렇지 않으면 서버에서 refetch 하겠죠. (nested list views 인 경우에는 jQuery Mobile은 필요에 따라 더 이상 관련 없는 nested page를 remove 하게 됩니다.)

multi-page template 안에 있는 페이지들은 이 기능에 영향을 받지 않습니다. - jQuery Mobile은 Ajax 를 통해 로드된 페이지들만 remove 합니다.

Caching pages in the DOM

If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.

원하시면 이전에 방문했던 페이지를 remove 하지 않고 DOM 에 보관하라고 jQuery Mobile에 지시할 수 있습니다. 그러면 유저가 다시 그 페이지를 방문할 때 빨리 보여줄 수 있겠죠.

To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:

방문했던 모든 페이지를 DOM에 보관하려면 domChache 옵션을 true로 세팅하면 됩니다.


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

특정 페이지만 cache 하시려면 그 페이지의 콘테이너에 data-dom-cache="true" 속성을 추가하시면 됩니다.


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

programmatically 페이지를 cache 할 수도 있습니다.

pageContainerElement.page({ domCache: true });

DOM caching의 drawback하면 DOM이 아주 크게 될 수 있습니다. 그러면 속도가 느려지거나 어떤 디바이스에서는 저장용량 문제가 발생할 수 있습니다. DOM caching 을 할 때는 이런 부분을 잘 관리하셔야 합니다. 그리고 여러 디바이스에서 충분히 테스트 해 보셔야 합니다.