??xml version="1.0" encoding="utf-8" standalone="yes"?> SiteMesh设计思想是,用户发?span lang="EN-US">requestx务器Q服务器Ҏ(gu)?span lang="EN-US">request生成动态数据,生成|页Q准备返回给客户端。就在返回前Q?span lang="EN-US">SiteMeshq行拦截Q对此网进行解析,?span lang="EN-US">title?span lang="EN-US">body{部分拆解出来,套上模板后,再返回给客户端。由?span lang="EN-US">SiteMesh在返回客L(fng)的最后一步工作,此时的网已l具备了(jin)标准?span lang="EN-US">html|页格式Q因?span lang="EN-US">SiteMesh只需解析标准?span lang="EN-US">html|页Q无需考虑各个Web应用是应用了(jin)JSP?span lang="EN-US">ASPQ还?span lang="EN-US">Velocity技术,相当灉|?/span> SiteMesh使用?span lang="EN-US">Decorator的设计模式?/span> 本文为大家展CZ个简单的SiteMesh例子?/span> 首先创徏一?span lang="EN-US">web工程.名字叫?span lang="EN-US">SitemeshSample.?span lang="EN-US">sitemesh-2.3.jar, commons-collections.jar攑ֈlib目录下?/span> ?span lang="EN-US">web.xml中加入如下片D?span lang="EN-US">: <filter> <filter-name>sitemesh</filter-name> <filter-class> com.opensymphony.module.sitemesh.filter.PageFilter </filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> q里定义?jin)一个过滤器.所有的h都交?/span>sitemesh来处?/span> ?span lang="EN-US">WEB-INF下创Z?span lang="EN-US">decorators.xml文g,内容如下: <?xml version="1.0" encoding="UTF-8"?> <decorators defaultdir="/decorators"> <decorator name="main" page="main.jsp"> <pattern>/*</pattern> </decorator> </decorators> q是定义?jin)模杉KQ也是所有页面在q回l客L(fng)之前Q先在这里加上装饎ͼ套上模板?/span> defaultdir="/decorators"说明?jin)模杉K的\径?/span><decorator name="main" page="main.jsp">模板늚名称?/span> <pattern>/*</pattern>表示Ҏ(gu)有的responseq行处理 ?/span>web下面Z个文件夹取名decorators.?/span>decoratots下面创徏上面定义的模杉K?/span>main.jsp,内容如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title><decorator:title /> </title> <body> <p>Add head decorator...</p> <decorator:body /> <p>Add foot decorator...</p> </body> </html> 说明: <%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%> 此处?/span>decorator标签的声明。因为我们下面要使用到它 <decorator:title /> 把请求的原始面?/span>title内容插入?/span><title></title>,比如我们要请?/span>index.jsp面的时候。会(x)?/span>index.jsp中的title的内Ҏ(gu)入到q里 <decorator:body /> 把请求的原始面?/span>body内容插入?/span><body></body>,发现没有我们在这句的前面加上?/span><p>Add head decorator...</p>?/span><p>Add foot decorator...</p> 相当于给我们h的页面的body内容加上?jin)头部和N.实现?jin)模板功能?/span> ?/span>WEB-INF下创建我们要h讉K的页?/span>index.jspQ内容如?/span>: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>SiteMesh Sample Site</title> </head> <body> Welcome to the SiteMesh sample... </body> </html> ?/span>web工程部v?/span>tomcat容器中?/span> 输入http://localhost:8080/SitemeshSample/index.jsp 面效果如下Q?/span> Add head decorator... Welcome to the SiteMesh sample... Add foot decorator... 不难发现Q我?/span>index.jsp中只?/span>Welcome to the SiteMesh sample... 一句。但是在q回l我们之前套上了(jin)main.jsp模板c(din)在它的前面和后面分别加上了(jin)一句话。通过Sitemesh我们可以很容易实现页面中动态内容和?rn)态装饰外观的分离?/span>
2
3 import javax.servlet.FilterChain;
4 import javax.servlet.ServletException;
5 import javax.servlet.ServletRequest;
6 import javax.servlet.ServletResponse;
7 import javax.servlet.http.HttpServletRequest;
8
9 import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;
10
11 public class StrutsAndFckFilter extends StrutsPrepareAndExecuteFilter {
12
13 @Override
14 public void doFilter(ServletRequest request, ServletResponse response,
15 FilterChain chain) throws IOException, ServletException {
16
17 HttpServletRequest httpRequest=(HttpServletRequest)request;
18
19 if("/fckeditor/editor/filemanager/connectors".equals(httpRequest.getServletPath())){
20 chain.doFilter(request, response);
21 }else{
22 super.doFilter(request, response, chain);
23 }
24 }
25
26 }
27
内容?connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
3. 修改web.xml
2 <filter-name>struts2</filter-name>
3 <filter-class>com.capinfo.cms.common.filter.StrutsAndFckFilter</filter-class>
4 </filter>
5 <servlet>
6 <servlet-name>ConnectorServlet</servlet-name>
7 <servlet-class>
8 net.fckeditor.connector.ConnectorServlet
9 </servlet-class>
10 <load-on-startup>1</load-on-startup>
11 </servlet>
12
13 <servlet-mapping>
14 <servlet-name>ConnectorServlet</servlet-name>
15 <!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
16 <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
17 </servlet-mapping>
]]>
]]>
调用ocx的网在本地Ie可以打开,但把|页攑ֈ服务器上׃行了(jin)
解决Q在客户端设|服务器|址为受信Q的站点,在将受信ȝ站点的安全别设|ؓ(f)最低?/p>
原文来自Q?a >http://www.space007.com/post/129.html
转帖来自: http://www.aygfsteel.com/Jack2007/archive/2008/05/30/204146.html
怿互联|已l越来越成ؓ(f)Z生活中不可或~的一部分。ajaxQflex{等富客L(fng)的应用得h们越?#8220;q福”C验着许多原先只能在C/S实现的功能。比如GoogleZ(x)已经把最基本的office应用都搬C(jin)互联|上。当然便利的同时毫无疑问的也佉K面的速度来慢。自己是做前端开发的Q在性能斚wQ根据yahoo的调查,后台只占5%Q而前端高?5%之多Q其中有88%的东西是可以优化的?/p>
以上是一张web2.0面的生命周期图。工E师很Ş象地讲它分成?#8220;怀孕,出生Q毕业,l婚”四个阶段。如果在我们点击|页链接的时候能够意识到q个q程而不是简单的h-响应的话Q我们便可以挖掘出很多细节上可以提升性能的东ѝ今天听?jin)淘宝小马哥的一个对yahoo开发团队对web性能研究的一个讲座,感觉收获很大Q想在blog上做个分享?/p>
怿很多人都听过优化|站性能?4条规则。更多的信息可见developer.yahoo.com
1. 可能的减少 HTTP 的请求数 | [content] |
2. 使用 CDNQContent Delivery NetworkQ?/td> | [server] |
3. d Expires ?或?Cache-control ) | [server] |
4. Gzip lg | [server] |
5. ?CSS 样式攑֜面的上?/td> | [css] |
6. 脚本移动到底部Q包括内联的Q?/td> | [javascript] |
7. 避免使用 CSS 中的 Expressions | [css] |
8. ?JavaScript ?CSS 独立成外部文?/td> | [javascript] [css] |
9. 减少 DNS 查询 | [content] |
10. 压羃 JavaScript ?CSS (包括内联? | [javascript] [css] |
11. 避免重定?/td> | [server] |
12. U除重复的脚?/td> | [javascript] |
13. 配置实体标签QETagsQ?/td> | [css] |
14. ?AJAX ~存 |
在firefox下有一个插件yslowQ集成在firebug中,你可以用它很方便地来看看自己的网站在q几个方面的表现?/p>
q是对用yslowҎ(gu)的网?a hideFocus style="hide-focus: true" target="_blank">襉K?/a>评的结果,很遗憾,只有51分。呵c(din)中国各大网站的分值都不高Q刚了(jin)一下,新浪和网易都?1分。然?a hideFocus style="hide-focus: true" target="_blank">yahooQ美国)(j)的分值确?7分!可见yahoo在这斚w作出的努力。从他们ȝ的这14条规则,已经现在又新增加?0个点来看Q有很多l节我们真得是怎么都不?x)去惻I有些做法甚至是有?#8220;变?#8221;?jin)?/p>
W一条、尽可能的减?HTTP 的请求数 Q?a hideFocus style="hide-focus: true" >Make Fewer HTTP Requests Q?/p>
httph是要开销的,惛_法减请求数自然可以提高|页速度。常用的Ҏ(gu)Q合qcssQjsQ将一个页面中的css和js文g分别合ƈQ以?qing)Image maps和css sprites{。当然或许将cssQjs文g拆分多个是因为cssl构Q共用等斚w的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发,然后在后台对jsQcssq行合ƈQ这样对于浏览器来说依然是一个请求,但是开发时仍然能还原成多个Q方便管理和重复引用。yahoo甚至首늚css和js直接写在面文g里面Q而不是外部引用。因为首늚讉K量太大了(jin)Q这么做也可以减两个请求数。而事实上国内的很多门户都是这么做的?/p>
而css sprites是指只用页面上的背景图合ƈ成一张,然后通过css的background-position属性定义不q的值来取他的背景。淘宝和阉K巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阉K巴巴的背景图?/p>
http://www.csssprites.com/ q是个工L(fng)站,它可以自动将你上传的囄合ƈq给出对应的background-position坐标。ƈ结果以png和gif的格式输出?/p>
W二条、用CDNQ内容分发网l)(j): Use a Content Delivery Network
说实话,对于CDNq一块自己ƈ不是很了(jin)解,单地Ԍ通过在现有的Internet中增加一层新的网l架构,网站的内容发布到最接近用户的cache服务器内Q通过DNS负蝲均衡的技术,判断用户来源p讉Kcache服务器取得所需的内容,杭州的用戯问近杭州服务器上的内容,北京的访问近北京服务器上的内宏V这样可以有效减数据在|络上传输的旉Q提高速度。更详细地内容大家可以参考百度百U上对于CDN的解释?span lang="EN-US">Yahoo!把静(rn)态内容分布到CDN减少?jin)用户?jing)响时?/span>20%或更多?/span>
CDN技术示意图Q?/p>
CDNl网C意图:(x)
W三条?dExpire/Cache-Control ?/strong>QAdd an Expires Header
现在来多的图片,脚本QcssQflash被嵌入到面中,当我们访问他们的时候势必会(x)做许多次的httph。其实我们可以通过讄Expires header来缓存这些文件。Expire其实是通过header报文来指定特定类型的文g在览器中的缓存时间。大多数的图片,flash在发布后都是不需要经怿改的Q做?jin)缓存以后这h览器以后׃需要再从服务器下蝲q些文g而是而直接从~存中读取,q样再次讉K面的速度?x)大大加快?/span>一个典型的HTTP 1.1协议q回的头信息Q?br />
HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
Content-Length: 1040
Content-Type: text/html
其中通过服务器端脚本讄Cache-Control和Expires可以完成?/p>
如,在php中设|?0天后q期Q?br />
<!--pHeader("Cache-Control: must-revalidate");$offset = 60 * 60 * 24 * 30;$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";Header($ExpStr);-->
在asp中设|绝Ҏ(gu)间过期:(x)
<% Response.ExpiresAbsolute=#May 31,2010 13:30:15 GMT# %>
也可以通过配置服务器本w完成,q些偶就不是很清楚了(jin)Q呵c(din)想?jin)解跟多的朋友可以参?a hideFocus style="hide-focus: true" >http://www.web-caching.com/
据我?jin)解Q目前阿里巴巴中文站的Expiresq期旉?0天。不q期间也有过问题Q特别是对于脚本q期旉的设|还是应该仔l考虑下,不然相应的脚本功能更新后客户端可能要q很长一D|间才?#8220;感知”到这L(fng)变化。以前做[suggest目] 的时候就遇到q这个问题。所以,哪些应该~存Q哪些不该缓存还是应该仔l斟酌一番?/p>
W四条、启用Gzip压羃Q?/span>Gzip Components
Gzip的思想是把文件先在服务器端进行压~,然后再传输。这样可以显著减文件传输的大小。传输完毕后览器会(x)重新对压~过的内容进行解压羃Qƈ执行。目前的览器都?#8220;良好”地支?gzip。不仅浏览器可以识别Q而且各大“爬虫”也同样可以识别,各位seoer可以放下?j)?jin)。而且gzip的压~比例非常大Q一般压~率?5%Q就是说服务器端100K的页面可以压~到25K左右再发送到客户端。具体的Gzip压羃原理大家可以参考csdn上的?/font>gzip压羃法?/font> q篇文章。雅虎特别强调, 所有的文本内容都应该被gzip压羃: html (php), js, css, xml, txt… q一Ҏ(gu)们网站做得不错,是一个A。以前我们的首页也ƈ不是AQ因为首上q有很多q告代码投放的jsQ这些广告代码拥有者的|站的js没有l过gzip压羃Q也?x)拖累我们网站?/p>
以上三点大多属于服务器端的内容,本h也是_浅C(jin)解而已。说得不对的地方有待各位指正?nbsp; W五条、将css攑֜面最上面 Q?Put Stylesheets at the TopQ?/span> css攑֜面最上面Q这是ؓ(f)什么?因ؓ(f)ieQfirefox{浏览器在css全部传输完全之前不会(x)L染Q何的东西。理p如小马哥说得那样很简单。cssQ全UCascading Style Sheets (层叠样式表单)。层叠即意味q后面的css可以覆盖前面的cssQ别高的css可以覆盖U别低的css。在[css之!important] q篇文章的最下面曄单地提到q这层关系Q这里我们只需要知道css可以被覆盖的。既然前面的可以被覆盖,览器在他完全加载完毕之后再L染无疑也是合情合理的很多览器下Q如IEQ把样式表放?/span>面的底部的问题在于它禁止了(jin)|页内容的顺序显C。浏览器L昄以免重画面元素Q那用户只能看到I白了(jin)?/span>Firefox不会(x)L昄Q但q意味着当样式表下蝲后,有些面元素可能需要重画,q导致闪烁问题。所以我们应该尽快让css加蝲完毕 着q层意思,如果我们再细I的话,其实q有可以优化的地斏V比如本站上面包含的两个css文gQ?lt;link rel="stylesheet" rev="stylesheet" href="http://www.space007.com/themes/google/style/google.css" type="text/css" media="screen" /> ?lt;link rel="stylesheet" rev="stylesheet" href="http://www.space007.com/css/print.css" type="text/css" media="print" />。从media可以看出第一个css是针Ҏ(gu)览器的,W二个css文g是针Ҏ(gu)印样式的。从用户的行Z(fn)惯上来将Q要打印面的动作一定是发生在页面页面显C出来之后的。所以比较好的方法应该是在页面加载完毕之后再动态地张页面加上针Ҏ(gu)印设备的cssQ这样又可以提高一炚w度。(哈哈Q?/span> W六条、将script攑֜面最下面 QPut Scripts at the Bottom Q?/span> 脚本放在页面最下面的目的有那么两点Q?/span> 1、因为防止script脚本的执行阻塞页面的下蝲。在面loading的过E中Q当览器读到js执行语句的时候一定会(x)把它全部解释完毕后在?x)接下来M面的内容。不信你可以写一个jsd@环看看页面下面的东西q会(x)不会(x)出来。(setTimeout ?setInterval的执行有点类g多线E,在相应的响应旉之前也会(x)l箋下面的内Ҏ(gu)染。)(j)览器这么做的逻辑是因为js随时可能执行 location.href或是其他可能完全中断此页面过E的函数Q即如此Q当然得{他执行完毕之后再加载咯。所以放在页面最后,可以有效减少面可视元素的加载时间?nbsp; 2?span style="font-family: 宋体">脚本引v的第二个问题是它dq行下蝲数量?span lang="EN-US">HTTP/1.1规范览器每个主机的q行下蝲C过2个(IE只能?个,其他览器如ff{都是默认设|ؓ(f)2个,不过新出的ie8可以?个)(j)。因此如果?zhn)把图像文件分布到多台机器的话Q?zhn)可以辑ֈ?/span>2个的q行下蝲。但是当脚本文g下蝲Ӟ览器不?x)启动其他的q行下蝲?/span> 当然对各个网站来_(d)把脚本都攑ֈ面底部加蝲的可行性还是值得商榷的。就比如阉K巴巴中文站的面。很多地Ҏ(gu)内联的jsQ页面的昄严重依赖于此Q我承认q和无R入脚本的理念相差甚远Q但是很?#8220;历史遗留问题”却不是那么容易解决的?/span> W七条?strong>避免?/strong>CSS中?/strong>Expressions QAvoid CSS Expressions Q?/span> css表达是的执行ơ数是远q多于我们想象的Q往往?x)严重地影响性能。而且Q它只能在IE中执行。所以因量地避免它。这一条以前倒没惌Q个人用q个是在对ie使用max-width和min-width属性的时候。大家知道IE是不支持max-width和min-width属性的。有时候的面Q特别是自适应大小的页面)(j)Z(jin)能在分L率小C定程度后q能昄要用到这个功能,怎么办。当时我的做法就是利用expressions: 不过从今天应该寻找新的办法了(jin)。目前的解决办法是通过两层的嵌套:(x) css文gQ?/p>
html文gQ?/p>
不过q样多?jin)两层无意义的嵌套,肯定不好。还需要一个更好的办法?span style="font-family: 宋体"> W八条?strong>把javascript和css都放到外部文件中 QMake JavaScript and CSS External Q?/span> q点我想q是很容易理解的。不仅从性能优化上会(x)q么做,用代码易于维护的角度看也应该q么做。把css和js写在面内容可以减少2ơ请求,但也增大?jin)页面的大小。如果已l对css和js做了(jin)~存Q那也就没有2ơ多余的httph?jin)。当?dng)我在前面中也说过Q有些特D的面开发h员还是会(x)选择内联的css和js文g?/p>
W九(ji)条、减DNS查询 (Reduce DNS Lookups) 在Internet上域名与IP地址之间是一一对应的,域名Qkuqin.comQ很好记Q但计算Z认识Q计机之间?#8220;相认”q要转成ip地址。在|络上每台计机都对应有一个独立的ip地址。在域名和ip地址之间的{换工作称为域名解析,也称DNS查询。一ơDNS的解析过E会(x)消?0-120毫秒的时?在dns查询l束之前Q浏览器不会(x)下蝲该域名下的Q何东ѝ所以减dns查询的时间可以加快页面的加蝲速度。yahoo的徏议一个页面所包含的域名数量控制?-4个。这需要对面整体有一个很好的规划。目前我们这点做的不好,很多打点的广告投攄l拖累了(jin)我们?/span> W十条?/strong>压羃 JavaScript ?CSS (Minify JavaScript ) 压羃js和css的左叛_昄Q减页面字节数。容量小面加蝲速度自然也就快。而且压羃除了(jin)减少体积以外q可以vC定的保护左右。这Ҏ(gu)们做得不错。常用的压羃工具有JsMin、YUI compressor{。另外像http://dean.edwards.name/packer/q给我们提供?jin)一个非常方便的在线压羃工具。你可以在jQuery的网늜到压~过的js文g和没有压~过的js文g的容量差别:(x) 当然Q压~带来的一个弊端就是代码的可读性没?jin)。相信很多做前端的朋友都遇到q这个问题:(x)看Google的效果很P可是ȝ他的源代码却是一大堆挤在一L(fng)字符Q连函数名都是替换过的,汗死Q自q代码也这样岂不是对维护非怸方便。所有阿里巴巴中文站目前采用的做法是在js和css发布的时候在服务器端q行压羃。这样在我们很方便地l护自己的代码?/p>
W十一条?/strong>避免重定?/span> (Avoid Redirects ) 不久前在ieblog上看到过?a hideFocus style="hide-focus: true" target="_blank">Internet Explorer and Connection Limits》这文章,比如 当你输入http://www.ithao123.com 的时候服务器?x)自动生一?01服务器{?http://www.kuqin.com/ Q你看浏览器的地址栏就能看出来。这U重定向自然也是需要消耗时间的。当然这只是一个例子,发生重定向的原因q有很多Q但是不变的是每增加一ơ重定向׃(x)增加一ơwebhQ所以因该尽量减?/span> W十二条?/strong>U除重复的脚?/span> (Remove Duplicate Scripts ) q点我想不说也知道,不仅是从性能上考虑Q代码规范上看也是这栗但是不得不承认Q很多时候我们会(x)因ؓ(f)图一时之快而加上一些或许是重复的代码。或怸个统一的css框架和js框架可以比较好的解决我们的问题。小猪的观点很对Q不仅是要做C重复Q更是要做到可重用?/span> W十三条?/strong>配置实体标签QETagsQ?/span> (Configure ETags ) q点我也不懂Q呵c(din)在inforQ上找C解释得比较详细的说明?a hideFocus style="hide-focus: true" target="_blank">使用ETags减少Web应用带宽和负?/a>》,有兴的同学可以ȝ看?/p>
W十四条?/strong>?AJAX ~存 (Make Ajax Cacheable ) ajaxq要ȝ存?做ajaxh的时候往往q要增加一个时间戳去避免他~存。It's important to remember that "asynchronous" does not imply "instantaneous".Q记?#8220;异步”不是“瞬间”q一点很重要Q。记住,即AJAX是动态生的而且只对一个用戯v作用Q他们依然可以被~存?/p>
min-width:952px; width:expression((document.documentElement.clientWidth <952 ) ? "952":"auto")
#main_box{width:70%;height:100px; background:#ffffcc; min-width:600px;margin:auto; } #p_main_box{ border-left:600px solid #ffffcc; height:1px; } #m_main_box{ margin-left:-600px; position:relative; height:1px; text-align:center; }
>
</p><div id="main_box"><div id="p_main_box"><div id="m_main_box">最宽?00pxQ?font color="#000080"></div></div></div><p
本博客ؓ(f)学习(fn)交流用,凡未注明引用的均为本Z品,转蝲h明出处,如有版权问题请及(qing)旉知。由于博客时间仓?j),错误之处敬请谅解Q有M意见可给我留aQ愿共同学习(fn)q步?/span>
]]>