优化JS的小总结 -

Liu_wh

浏览: 18619 次
性别:
来自: 广州

最近访客更多访客>>

一点光辉

suncong1024

bygenius

xdsanmao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

优化JS的小总结

博客分类：

Javascript

EXT Tomcat XML YUI Web

    优化JS主要为了网页更好更快的访问并展显给客户端；个人也谈谈关于JS优化的小总结；虽然本人算不上什么JS高手但是也有自己的一些看法和见解在这里和大家说说；如果有不太对地方或有更好的方法请指示；个人认为主要三点：

     1、JS代码本身的简化
     2、使用工具减缩JS本身的大小包括空格换行
     3、使用压缩传输

     第一点JS本身的简化；JS代码有很多值得注意的使用技巧比如：
     A、全局变量：应减少使用宁可用100个局部变量都不使用一个全局变量
     B、循环：如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或—操作符；如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数；如果有异常捕获尽量把异常捕获写在外面；如果在循环中要拼接字符串最好用StringBuilder.append("你的字符串");这种方式不用String直接操作。
    C、其它：比如少使用Eval；还有类型转换技巧；还有减少不必要的对象创建也就是少用new一个对象等等```（其它就不细说了）

    第二点使用工具对JS文件本身压缩，现在流行的js压缩工具有很多，如packer,jsMin,Esc,JSA,yui-compressor等等都可以对JS文件瘦身（主要是去空格和换行己达到减少文件大小的目的），压缩比例是相当可观的。

    第三点压缩传输现在一般的浏览器都支持压缩传输现在用得比较多的莫过于gzip压缩
它的使用：
    A、容器（服务器）提供的功能，但这个局限于特定容器。如apache+tomcat或者resin-pro版。
    1、TOMCAT的配置在server.xml启用支持gzip压缩.添加下列属性
compression="on"
compressionMinSize="2048"
noCompressionUserAgents="gozilla, traviata"
compressableMimeType="text/html,text/xml"

   2、jobss的配置在server.xml下修改端口的那段：
<Connector port="80" address="0.0.0.0"
        maxThreads="250" maxHttpHeaderSize="8192"
        emptySessionPath="true" protocol="HTTP/1.1"
        enableLookups="false" redirectPort="8443" acceptCount="100"
        connectionTimeout="20000" disableUploadTimeout="true"
        compression="on"
        noCompressionUserAgents="gozilla, traviata"
    compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,application/json" />

    B、是部署前手动gzip压缩，配合servlet过滤器使用，这个能实现gzip功能，但是降低了灵活性。这种又可分两种方式实现：
    第一种是手动压缩JS，编写自己的过滤器（Filter），配置自己过滤器
    1、将js文件手动压缩。如项目中的ext-all.js 使用gzip压缩，压缩之后将
文件后缀改为.gzjs.(压缩比例大致为70%)。运行gzip工具输入指令 gzip -c ext-all.js > ext-all.gzjs 即可生成新的文件
   2、编写Filter

1.	public class GzipJsFilter implements Filter   
2.	{   
3.	Map headers = new HashMap();   
4.	  
5.	public void destroy() { }   
6.	  
7.	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {   
8.	    if (req instanceof HttpServletRequest)   
9.	      doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);   
10.	    else  
11.	      chain.doFilter(req, res);   
12.	}   
13.	  
14.	public void doFilter(HttpServletRequest request, HttpServletResponse response,FilterChain chain)   
15.	    throws IOException, ServletException   
16.	{   
17.	    request.setCharacterEncoding("UTF-8");   
18.	    for (Iterator it = this.headers.entrySet().iterator(); it.hasNext(); ) {   
19.	      Map.Entry entry = (Map.Entry)it.next();   
20.	      response.addHeader((String)entry.getKey(), (String)entry.getValue());   
21.	    }   
22.	    chain.doFilter(request, response);   
23.	}   
24.	  
25.	public void init(FilterConfig config) throws ServletException {   
26.	    String headersStr = config.getInitParameter("headers");   
27.	    String[] headers = headersStr.split(",");   
28.	    for (int i = 0; i < headers.length; ++i) {   
29.	      String[] temp = headers[i].split("=");   
30.	      this.headers.put(temp[0].trim(), temp[1].trim());   
31.	    }   
32.	}   
33.	}

3、配置web.xml代码

1.	<filter>    
2.	      <filter-name>GzipJsFilter</filter-name>    
3.	      <filter-class>com.monica.bussiness.GzipJsFilter</filter-class>    
4.	      <init-param>    
5.	          <param-name>headers</param-name>    
6.	          <param-value>Content-Encoding=gzip</param-value>    
7.	      </init-param>  
8.	</filter>  
9.	<filter-mapping>  
10.	   <filter-name>GzipJsFilter</filter-name>  
11.	   <url-pattern>*.gzjs</url-pattern>  
12.	</filter-mapping>

    第二种使用工具包
    1、下载tk-filter工具包。下载地址 http://sourceforge.net/projects/filterlib
   2、将解压后得到的jar包引入工程。将tk-filters.properties加入工程WEB-INF/class目录下，修改tk-filters.properties GZIPFilter.Enabled=true
   3、配置web.xml

1.	<filter>  
2.	    <filter-name>GZIPFilter</filter-name>  
3.	    <filter-class>com.tacitknowledge.filters.gzipfilter.GZIPFilter</filter-class>  
4.	</filter>  
5.	  
6.	  <filter-mapping>  
7.	    <filter-name>GZIPFilter</filter-name>  
8.	    <url-pattern>*.js</url-pattern>  
9.	  </filter-mapping>  
10.	  
11.	  <filter-mapping>  
12.	    <filter-name>GZIPFilter</filter-name>  
13.	    <url-pattern>*.css</url-pattern>  
14.	  </filter-mapping>

压缩前后效果如图