对web应用效率提升的一些经验及疑问
1. 对dom节点的使用:
??? 尽量避免使用dom对象,大家都知道对dom树的遍历非常耗费资源,因此如果需要重复使用时,将dom对象存在一个js的变量中,然后对这个变量进行使用,避免每次使用dom节点时对dom树的遍历,切记,在使用完对dom对象引用的变量后要将其置为null,否则你会发现内存的占用率有增无减,直到你关闭了浏览器为止。
2. 对eval函数的使用:
???? 在使用eval函数时,会增加了对eval函数中代码解析的过程,而这个解析的过程是非常耗费资源的,因此,尽量避免使用eval函数,如果非用不可,也要尽可能的减少eval解析的代码量,将需要执行的代码提取到一个方法内,eval只解析这个函数名来提高eval的效率,可以通过以下的示例进行比较:
??? 方法一:
eval("for(var i = 0; i < 10000000; i ++) { var str = 'test' + i }");
????? 方法二:
var test = function() { for(var i = 0; i < 10000000; i ++) { var str = 'test' + i; } } var testFun = eval('test'); testFun();
3. try-catch的使用:
??? 尽量把try-catch语句放在循环外边。
4. 全局变量的使用:
???? 全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。
5. 压缩合并js和css文件:
?????这方面的优化估计很多人都做过,现在有好多JS和CSS压缩和混淆的工具,如yahoo的yui-compressor.jar,在页面完全使用Ext等js框架开发时压缩和混淆JS对效率提升尤其明显。
6. 异步请求中GET与POST的选择:
???? 大家都知道用GET方式来发送HTTP请求效率要远远高于POST请求,但是出于安全的考虑,这里需要慎重选择请求方式,可以参考我的另外一篇文章。
?
--------------------------------------------------------?
?
另外,还有一些开发过程中的细节也会对效率提升起到一定得作用:
1. 不要使用with语句
2. str += "aaa"; str += "bbb"; 效率大于 str = "aaa" + "bbb";
3. 原生的态的写法效率大于函数,如:
????a > b ? a : b; 效率大于 Math.max(a, b);
??? array[array.length] = obj; 效率大于 array.push(obj);
4. 对数组进行遍历时,先把数组的长度保存在变量中
for(var i = 0, len = array.length; i < len; i ++) { // 遍历数组 }
5. innerHTML方法效率大于createElement()/appendChild()方法
6. 尽量减少图片链接个数,减少对带宽的耗费
?
--------------------------------------------------------
?
目前还在对以下几方面的优化进行分析和研究,都是本机测试,基本可以忽略网络问题,希望高人可以进行指点:
1. ajax以POST方式发送异步请求时的性能优化
??? 现状:用HTTPWATCH检测时,SEND时间过长,有时竟然会超过0.8秒,传输量并不大,???
??? 请求信息:
??? Content-Type : application/x-www-form-urlencoded;charset=UTF-8
??? Content-Length : 133 (10个字符串参数)
2. 在接收response的content时的性能优化
??? 现状:用HTTPWATCH监测时,RECEIVE时间过长
??? response信息:
??? HTTP/1.1 200 OK
??? Server : Apache-Coyote/1.1
??? Content-Type : text/plain;charset=UTF-8
??? Content-Length : 4147
3. 在多个请求之间会有延时,如第一个请求完成之后会有零点几秒的延时才会进行下一个请求,那么这个延时的时间可以进行优化吗?这个延时的时间到底是在做什么呢?执行javascript代码?还是请求的等待队列?
希望高人可以指点,先行谢过!
?