优化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>
压缩前后效果如图
- 大小: 37.2 KB
- 大小: 29.2 KB
分享到:
相关推荐
JavaScript 性能优化的小知识总结
JavaScript性能优化的小知识总结共23页.pdf.zip
JavaScript性能优化的小知识总结共23页.pdf.zip
js内存管理及优化总结和文档,有些文档已经比较旧了,目前来说很少有人关注js内存管理,这里有一些别人总结出来的文章和参考文档,多少能长点见识。
web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题...
JavaScript中条件语句的优化技巧总结 对多个条件使用 Array.includes function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 上面的例子看起来不错。然而,...
前端时间对公司已有项目JavaScript代码进行优化,本文的是对优化工作的一个总结,拿出来与大家分享。当然我的优化方式可能并不是最优的,或者说有些不对的地方,请指教。JavaScript优化总结分为以下几点优化前后对比...
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文给大家介绍javascript性能优化之小知识总结,需要的朋友可以参考下
...
...
本篇文章给大家分享了关于javascript代码优化的8点总结,希望我们整理的内容能够帮助到大家。
主要介绍了Javascript中JSON数据分组优化实践,文中还对JS操作JSON的要领做了总结,需要的朋友可以参考下
前端性能优化 yahoo前端性能团队总结的35条黄金定律。
随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在...在使用JavaScript中我们通常会考虑其性能问题,因此将日常总结的关于JavaScript性能优化的方式总结出来,以
帝国CMS中小学生学习模板学生知识点总结试题练习题考试资讯网站源码 帝国CMS《学习》模板,简洁大气访问快,带一个漂亮体验好的手机端, 中小学生知识点总结、试题...移除了多余的js和css提高程序的安全与网站的稳定性。
目录 1、parse 解析器1.1 截取的规则1.2 截取过程部分1.3 解析器总结2、optimize 优化器2.1 静态节点2.2 静态根节点2.3 优化器总结3、generate 代码生成器3.1 JS的with语法 1、parse 解析器 1.1 截取的规则...
介绍雅虎团队网站优化经验:总结性能优化的34 条黄金守则
本文给大家总结了有关js代码性能优化的相关知识,非常不错,感兴趣的朋友一起学习吧