Click Framework最佳实践-性能-CSDN博客

Yahoo公布了改善web应用性能的最佳实践列表。

Click框架提供了一个PerformanceFilter 去迎合当中的一些规则。然而不是所有的规则都很容易的被实现。

这一节将会概括应用PerformanceFilter 没有包括的规则的方法，#1 - Minimize HTTP Requests (by combining files) 和 #10 - Minify Javascript and CSS.。

规则1也涉及到CSS Sprites, 把多个图片结合一个的方法。这里不谈论CSS Sprites。

不是每个页面都需要优化的，应该集中在经常被访问的页面，例如主页面。

有些工具对规则1和10是有用的。

YUICompressor - 缩小和压缩JavaScript和CSS文件，这样会传输更少的字节。
Ant Task for YUICompressor - 使用YUICompressor压缩JavaScript和CSS文件的Ant任务。
JSMin - 类似YUICompressor，但只缩小（移除空格和换行）JavaScript文件但不压缩。JSMin的优点是比r YUICompressor快可以在运行期缩小JavaScript，而YUICompressor最好在编译期使用。

下面的文章概括出怎样使用YUICompressor和使用Ant将JavaScript和CSS文件结合和压缩:

Article 解释怎样使用Ant和YUICompressor压缩.
Article 概括怎样使用一个特殊的YUICompressor Ant任务压缩。

使用上面的一个方法你可以连接压缩所有的JavaScript和CSS文件成2个独立的文件。例如home-page.css和home-page.js。注意这两个文件必须包括所有的JavaScript和CSS文件，通常这些文件是Page和Control使用的。之后只需要让Click包含这2个压缩的文件，home-page.css和home-page.js。

Click使用工具类PageImports引入CSS和JavaScript。PageImports有一个setInitialized(boolean)方法，使用这个方法设置PageImports初始化完成。一旦PageImports完成初始化，其他的CSS和JavaScript不再会被引入。

重载Page.getPageImports()方法，引入必要的JavaScript和CSS文件然后设置PageImports已完成初始化，迫使PageImport跳过其他的CSS和JavaScript文件。

public class HomePage extends Page {
   private Form form = new Form("form");      
   public void onInit() {
	form.add(new EmailField("email");         
	addControl(form);    
   }
   public void getPageImports () {        
	PageImports pageImports = super.getPageImports();         
	String contextPath = getContext().getRequest().getContextPath();          
	String cssInclude = contextPath + "/assets/css/home-page.css";         
	pageImports.addImport("<link type=\"text/javascript\" href=\"" + cssInclude + "\"/>");        
	String jsInclude = contextPath + "/assets/js/home-page.js";        
	pageImports.addImport("<script type=\"text/javascript\" src=\"" + jsInclude + "\"></script>");   
	// Set pageImports to initialized so that no other CSS and JavaScript files will be included.   
	pageImports.setInitialized(true);    
   } 
}

border-template.htm

<html>   
	<head>    
		<title>Click Examples</title>    
		${cssImports}   
	</head>  
	<body>   
		...    
		${jsImports}  
	</body> 
</html>

HTML要包括一个CSS和JavaScript文件：

<html>  
   <head>     
        <title>Click Examples</title>     
        <link type="text/css" rel="stylesheet" href="/click-examples/assets/css/home-page.css" title="Style"/> 
   </head>   
   <body>
         ...    
         <script type="text/javascript" src="/click-examples/assets/js/home-page.js"></script>   
   </body> 
</html>