| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>5.9. Performance</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="ch05.html" title="Chapter 5. Best Practices"><link rel="prev" href="ch05s08.html" title="5.8. Error Handling"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">5.9. Performance</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch05s08.html">Prev</a> </td><th width="60%" align="center">Chapter 5. Best Practices</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="5.9. Performance"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="performance"></a>5.9. Performance</h2></div></div></div><p>Yahoo published a list of |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://developer.yahoo.com/performance/rules.html" target="_blank">best practices</a> |
| for improving web application performance. |
| </p><p>Click Framework provides a |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../extras-api/org/apache/click/extras/filter/PerformanceFilter.html" target="_blank">PerformanceFilter</a> |
| which caters for some of these rules. However not all rules can be easily automated. |
| </p><p>This section outlines how to apply some important rules which are not |
| covered by the PerformanceFilter namely, |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://developer.yahoo.com/performance/rules.html#num_http" target="_blank">Minimize HTTP Requests (by combining files)</a> |
| and <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://developer.yahoo.com/performance/rules.html#minify" target="_blank">Minify JavaScript and CSS</a>. |
| </p><p>The Rule, <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://developer.yahoo.com/performance/rules.html#num_http" target="_blank">Minimize HTTP Requests</a>, |
| also mentions <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://alistapart.com/articles/sprites" target="_blank">CSS Sprites</a>, |
| a method for combining multiple images into a single master image. CSS Sprites |
| can boost performance when your application has many images, however it is |
| harder to create and maintain. Note that CSS Sprites is not covered here. |
| </p><p>It is worth pointing out that its not necessary to optimize |
| every page in your application. Instead concentrate on popular pages, for |
| example a web site's <span class="emphasis"><em>Home Page</em></span> would be a good |
| candidate. |
| </p><p>There are a couple of tools that are useful in applying the rules |
| "Minimize HTTP Requests" and "Minify JavaScript and CSS": |
| </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p> |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://developer.yahoo.com/yui/compressor/" target="_blank">YUICompressor</a> |
| - minifies and compresses JavaScript and CSS files so less bytes have to |
| be transferred across the wire. |
| </p></li><li class="listitem"><p> |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://code.google.com/p/javaflight-code/" target="_blank">Ant Task for YUICompressor</a> |
| - an Ant task that uses YUICompressor to compress JavaScript and CSS files. |
| </p></li><li class="listitem"><p> |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.crockford.com/javascript/jsmin.html" target="_blank">JSMin</a> |
| - similar to YUICompressor but only minifies (remove whitespace and newlines) |
| JavaScript files and does no compression at all. An advantage of JSMin |
| over YUICompressor is that its faster and can be used at runtime to minify |
| JavaScript, while YUICompressor is most often used at build time. |
| </p></li></ul></div><p>Below are some articles outlining how to use YUICompressor and Ant to |
| concatenate and compress JavaScript and CSS files: |
| </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p> |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.julienlecomte.net/blog/2007/09/16/" target="_blank">Article</a> |
| explaining how to use Ant and YUICompressor for compression. |
| </p></li><li class="listitem"><p> |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://javaflight.blogspot.com/2008/01/introducing-yui-compressor-ant-task.html" target="_blank">Article</a> |
| outlining how to use a special YUICompressor Ant Task for compression. |
| </p></li></ul></div><p>Using one of the approaches above you can concatenate and compress all |
| JavaScript and CSS for your Pages into two separate files, for example |
| <code class="filename">home-page.css</code> |
| and <code class="filename">home-page.js</code>. Note that the two files must include |
| all the JavaScript and CSS that is generated by the Page and its Controls. |
| Then you can instruct Click to <span class="emphasis"><em>only</em></span> include the two |
| compressed files, home-page.css and home-page.js. |
| </p><p>The Click Page class exposes the property |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Page.html#setIncludeControlHeadElements(boolean)" target="_blank">includeControlHeadElements</a> |
| that indicates whether Controls have their CSS and JavaScript resources |
| included or not. |
| </p><p>To optimize Page loading one can override |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Page.html#getHeadElements()" target="_blank">Page.getHeadElements()</a>, |
| and import the JavaScript and CSS files and then set the property |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/Page.html#setIncludeControlHeadElements(boolean)" target="_blank">includeControlHeadElements</a> |
| to <code class="literal">false</code>, indicating that Controls won't contribute |
| their own JavaScript and CSS resources. |
| </p><p>Here is an example:</p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> HomePage <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> Page { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">private</span> Form form = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Form(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"form"</span>); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> onInit() { |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Indicate that Controls should not import their head elements</span> |
| setIncludeControlHeadElements(false); |
| |
| form.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> EmailField(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"email"</span>); |
| addControl(form); |
| } |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> List getHeadElements() { |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">if</span> (headElements == null) { |
| headElements = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">super</span>.getHeadElements(); |
| |
| headElements.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> CssImport(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/assets/css/home-page.css"</span>)); |
| headElements.add(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> JsImport(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/assets/js/home-page.js"</span>)); |
| } |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> headElements; |
| } |
| }</pre><p>Using the following <code class="filename">border-template.htm</code>: |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><html></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><title></span>Click Examples<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></title></span> |
| ${headElements} |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><body></span> |
| |
| ... |
| |
| ${jsElements} |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></body></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></html></span></pre><p>the rendered HTML will include one CSS and one JavaScript import:</p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><html></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><title></span>Click Examples<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></title></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><link</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text/css"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">rel</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"stylesheet"</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">href</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"/click-examples/assets/css/home-page.css"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">title</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"Style"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">/></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><body></span> |
| |
| ... |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><script</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">type</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"text/javascript"</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="atn">src</span>=<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pln">"/click-examples/assets/js/home-page.js"</span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">></span><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></script></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></body></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></html></span></pre><p>A live demo is available |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="http://www.avoka.com/click-examples/general/page-imports-example.htm" target="_blank">here</a> |
| </p></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch05s08.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch05.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top">5.8. Error Handling </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html> |
