I talked to Patrick, who's currently working on improving the Auction example to better illustrate best practices - including serving up resources.
I was curious about the amount of processing involved with the various images and css files when they include /faces/ in the path and are therefore handled through the FacesServlet. So I created a servlet filter that was mapped only to .gif, .jpg, and .css requests and added up the cumulative time for loading these resources. Basically it measured the time that expires for each of those requests that we are interested in and keeps a running total:
long startRequest = System.currentTimeMillis();
chain.doFilter(req,res);
long expired = System.currentTimeMillis() - startRequest;
cumulativeProcessingTime += expired;
I then ran 100 wget requests against the page to get an idea of how much time was being spent serving up these resources using the page as it's currently coded using the /faces/* mapping:
for index in
{00..99}
; do wget -r http://localhost:8080/auction/faces/auction.xhtml; done
I ran it 3 times, then I then "fixed" most of the resources on the page and ran the same test. The results:
– NOT FIXED –
3 separate runs of 100 wget calls against the page with the resources not fixed. The last logging call in each case is presented to show the cumulative time spent serving those resources:
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 4
cumulative: 6726
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 2
cumulative: 7106
DebugFilter.doFilter:
request : /auction/faces/images/header_arrow_down.gif
expired : 2
cumulative: 6487
– FIXED –
3 separate runs of 100 wget calls against the page with the resources fixed so that they are not served using the /faces/ mapping. The last logging call in each case is presented to show the cumulative time spent serving those resources:
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 0
cumulative: 1155
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 1
cumulative: 1078
DebugFilter.doFilter:
request : /auction/images/header_arrow_down.gif
expired : 0
cumulative: 847
Predictably, there's a fairly significant overhead involved so we should ensure that we do what we can from both the application development side and the component/framework side to avoid this.
Copied from ICE-5366:
auction verified to be functional under /faces/* mapping.
application must be visited with the following URL:
http://localhost:8080/auction/faces/auction.xhtml
Application is not designed to handle servlet mapping changes, but the following page changes are an improvement:
(many images are still broken)
Index: samples/auction/src/main/webapp/auction.xhtml
===================================================================
— samples/auction/src/main/webapp/auction.xhtml (revision 22160)
+++ samples/auction/src/main/webapp/auction.xhtml (working copy)
@@ -27,8 +27,8 @@
<h:head><title>Auction Monitor - JSF 2.0 Direct-to-DOM (D2D) Version</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<h:outputScript name="jsf.js" library="javax.faces"/>
+ <link href="# {facesContext.externalContext.requestContextPath}/resources/demo_template.css" rel="stylesheet" type="text/css"/>
+ <link href="#{facesContext.externalContext.requestContextPath}
/resources/auction_styles.css" rel="stylesheet" type="text/css"/>
<!-
<link href="/auction/javax.faces.resource/demo_template.css.jsf" rel="stylesheet" type="text/css" />-><!-
<link href="/auction/javax.faces.resource/auction_styles.css.jsf" rel="stylesheet" type="text/css" />-><!--Appear to alternately reverse order between requests
@@ -51,12 +51,12 @@
</script>
<div>
<div class="header_right">
+ <h:graphicImage value="/css/images/banner_logo.jpg" alt="ICEfaces" width="267"
height="159"/>
</div>
<div class="header_container">
<div class="header_left">
+ <h:graphicImage value="/css/images/banner_hdr_auction.jpg"
width="463" height="100"
title="Component Suite Showcase"
alt="Component Suite Showcase"/>
@@ -221,7 +221,7 @@
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="background-image: url(images/button_bkgnd2.gif); background-position:top; background-repeat:repeat-x;">
+ <td width="13%" valign="top"><h:graphicImage value="/images/chat-icon.gif"
width="49" height="35"/>
</td>
<h:panelGroup rendered="# {UserBean.conversationStatus}
">
@@ -374,7 +374,7 @@
</div>
</div>
+ <div class="footer_right"><h:graphicImage value="/css/images/footer_faces.jpg"
alt="ICEfaces" width="121"
height="95" border="0"/></div>
</div>
@@ -382,8 +382,8 @@
<!-- PRELOAD TAB IMAGES -->
<div style="display: none">
+ <h:graphicImage value="/images/button_bid_accept.gif"/>
+ <h:graphicImage value="/images/button_bid_decline.gif"/>
</div>
</h:body>
</html>