Reducing the page load time can be done by caching the HTML content after initial rendering. PrimeFaces' cache
component can be used to cache the content. It supports two providers that enable content management in a cache store. The first provider is for Ehcache (http://ehcache.org) and the second one for Hazelcast (http://hazelcast.com/products/hazelcast).
In this recipe, we will use Ehcache—an open source, standard-based cache used to boost performance, offload the database, and simplify scalability. We will explain how the cache
component works in an example with a feed reader wrapped inside the p:cache
tag.
The cache provider is configured via a context parameter in web.xml
. The provider for Ehcache is configured here:
<context-param> <param-name>primefaces.CACHE_PROVIDER</param-name> <param-value>org.primefaces.cache.EHCacheProvider</param-value> </context-param>
A dependency for Ehcache in pom.xml
is required as well:
<dependency> <groupId>net.sf.ehcache</groupId> <artifactId>ehcache</artifactId> <version>2.9.0</version> </dependency>
By default, the Ehcache implementation looks for a file called ehcache.xml
at the top level of the classpath. If Ehcache does not find that file, it takes the ehcache-failsafe.xml
file that is packaged in the Ehcache JAR. For WAR projects, the ehcache.xml
file should be placed below the src/main/resources
folder. It contains a configuration for cache regions. You can imagine a region as a Map
object with key-value pairs. The value is the cached content then. The cache region in this recipe has the name appCache
. This is shown in the following code:
<?xml version="1.0" encoding="UTF-8"?> <ehcache xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="ehcache.xsd" updateCheck="true" monitoring="autodetect" dynamicConfig="true"> ... <cache name="appCache" maxEntriesLocalHeap="10000" eternal="false" timeToIdleSeconds="120" timeToLiveSeconds="120" diskSpoolBufferSizeMB="30" maxEntriesLocalDisk="10000000" diskExpiryThreadIntervalSeconds="120" memoryStoreEvictionPolicy="LRU"> </cache> </ehcache>
See the configuration details in the official Ehcache documentation (http://ehcache.org/documentation).
We will develop a feed reader that is encircled by p:cache
. The feed reader fetches podcasts from JSF Central (www.jsfcentral.com). This is shown in the following code:
<p:cache region="appCache" key="jsfcentral"> <p:feedReader value="http://www.jsfcentral.com/resources/ jsfcentralpodcasts/?feed=rss" var="feed" size="10"> <h:outputText value="#{feed.title}" style="font-weight: bold"/> <br/> <h:outputText value="#{feed.description.value}" escape="false"/> <p:separator/> </p:feedReader> </p:cache>
How much can p:cache
speed up page-loading time? The measured time for the occurrence of the window
onload
event depends on the existence of p:cache
. The page with the wrapped feed reader inside the p:cache
tag needs approximately 700–740 milliseconds until the onload
event occurs. The page with the feed reader without p:cache
needs approximately 1.4–1.8 milliseconds. The tests were performed on a computer with Window 8.1 and Firefox 34.
Once the page is loaded initially, the content inside p:cache
is cached inside the cache region of the cache provider. GET or POST requests on the same page or page fragment retrieve the output from the cache instead of rendering the content regularly.
The content within the cache region is identified by the key
attribute of the p:cache
tag. EL expressions such as key="some_#{userBean.language}"
are supported too so that key
can be done dynamic.
The getter and other methods from beans inside p:cache
are not invoked when the content is fetched from the cache. When the cache expires at the specified time (the timeToIdleSeconds
and timeToLiveSeconds
options in ehcache.xml
), the content will be rendered by JSF renderers and cached again for subsequent calls.
The cache provider can be accessed programmatically via the following code:
RequestContext.getCurrentInstance(). getApplicationContext().getCacheProvider()
All cache regions can be cleared then with the clear()
method. There are also the get
, put
, and remove
methods to get, put, and remove the content of the specific region and the specific key.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter11/caching.jsf
.
3.15.220.16