During page navigation in a single-page template application, each new page is fetched and stored in the DOM. The page remains in the DOM and is removed once you navigate away from the page. Only the main or the first page of the app always remains in the DOM. As seen in the previous recipe, prefetching commonly-used pages could help in improving performance to some extent. But when you visit a prefetched page and navigate away from it, the page gets removed from the cache. So the problem of multiple fetching of frequently visited pages is not fully solved.
With DOM caching, specific pages are marked to be cached in the DOM. These pages, once loaded, remain in the DOM all through the life cycle of the app. You can use the DOM cache in two ways. The first is by adding the data-dom-cache
attribute to the page container of the page that is to be cached. The second way is by using JavaScript. This recipe shows you how to improve the performance of your...