首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

优化JS的小小结

2012-10-28 
优化JS的小总结优化JS主要为了网页更好更快的访问并展显给客户端;个人也谈谈关于JS优化的小总结;虽然本人

优化JS的小总结
    优化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.<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>   


压缩前后效果如图

热点排行