在进行B/S前端开发时,页面代码要注意分离。这么做才是一种优良的编码行为。
1、js、css、html结构分离,可以使得页面更加整洁
2、js、css与html的分离可以使代码更大程度的重用
3、分离的结构便于脚本的平稳退化(迫使写出更好的额浏览器兼容js)
4、分离的结构可以对各种元素进行处理。如:
1)可以对js、jsp、图片等等进行压缩
2)可以对上述的js文件、css文件等进行压缩,通过压缩后传送到客户端,节约了网络资源
通过分离后,可以采用压缩技术与客户端缓存技术来优化项目。
在我使用的项目中,就采用了tk-filters来实现这一目的
1、下载tk-filters-1.0.1.zip
2、解压后将tk-filters.jar放到类路径
3、在解压后的conf目录下打开tk-filters.properties文件,里面涉及到了三个大项的配置
4、修改tk-filters.properties文件的压缩与缓存,使得启动这些功能
①、GZIPFilter.Enabled=true
②、GZIPFilter.LogStats=true
③、CacheFilter.Enabled=true
5、conf目录下面还有一个默认的web.xml文件的配置示例,上面都讲述了配置注意事项
6、在按照默认的示例配置web.xml时,还要根据实际情况进行配置,示例如下:
<filter> <filter-name>GZIPFilter</filter-name> <display-name>GZIPFilter</display-name> <description>Transparently compresses server output using Gzip encoding, when possible</description> <filter-class>com.bsoft.hzehr.biz.filter.GZIPFilter</filter-class> </filter> <filter> <filter-name>CacheFilter</filter-name> <display-name>CacheFilter</display-name> <description>Sends Expires HTTP headers to reduce unnecessary network traffic</description> <filter-class>com.tacitknowledge.filters.cache.CacheHeaderFilter</filter-class> </filter> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.js</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.css</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.jsonRequest</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.jshtml</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.dic</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.chart</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.ichart</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.graphic</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>/services/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>/print</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>/listprint</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.etReport</url-pattern> </filter-mapping> <filter-mapping> <filter-name>GZIPFilter</filter-name> <url-pattern>*.swf</url-pattern> </filter-mapping> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.js</url-pattern> </filter-mapping> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.css</url-pattern> </filter-mapping> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.gif</url-pattern> </filter-mapping> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.jpg</url-pattern> </filter-mapping> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.png</url-pattern> </filter-mapping>
参考资料:http://imti-qq.iteye.com/blog/1067202