高效率JavaScript编写技巧整理_javascript技巧
程序员文章站
2022-06-01 19:51:17
...
最近在编写一个JavaScript框架,发现有很多细节注意得不够,担心长时间积累会导致框架实际应用的时候出现严重的效率问题。于是开始关注JavaScript提高效率的一些技巧,在这里分享给大家。
1.JavaScript是唯一一个对代码体积要求越小越好的语言,因此我们可以通过一些工具来精简和压缩JavaScript代码,如JSMin、Packer、YUICompressor等。这些工具会将局部变量的名字替换成很短的变量名,例如将parseFloat()替换成a()。因此我们在编写JavaScript代码时,应将每一个全局变量都映射到一个局部变量,如var parseFloat = parseFloat;
2.通过JSLint来检测你编写的JavaScript,可以发现里面隐藏的很多问题。JSLint是一个JavaScript验证工具(非开源),可以扫描JavaScript源代码来查找问题。如果JSLint发现一 个问题,JSLint就会显示描述这个问题的消息,并指出错误在源代码中的大致位置。
3.我们在写JavaScript的时候经常需要遍历一个数组,代码如下:
for (var i=0;i//do something
}
JavaScript的成员变量是运行时确定的,这就导致每一次循环都需要查找数组length属性,因此我们可以增加一个变量来存储数组大小:
var l = array.length;
for (var i=0;i//do something
}
这样看起来已经优化得不错了,但实际上我们可以做得更好:
var i=array.length;
while(i--){
//do something
}
这是因为这两行代码转换成汇编时,while语句所需的指令更少,在这里就不展开说明了,大家有兴趣可以去研究下汇编。
4.由于JavaScript中任何人都可以修改或添加Object.prototype中的属性,因此我们在遍历一个对象的属性时,应先使用hasOwnProperty进行判断,避免遍历整个原型链,影响效率。如:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//do something
}
}
5.在使用undefined的时候先定义一个局部变量undefined
var checkVal = function(val) {
var undefined;
return val !== undefined;
};
上述代码中,如果没有提前定义局部变量,直接使用全局变量undefined进行判断,如果第三方在别的地方定义了一个全局变量undefined=3将导致结果错误。
6.在将一个非字符串类型的变量转换成字符串类型时,可以直接使用
var str = (i + "").replace(...);
这个地方如果使用String(i)会慢很多。
7.定义数组的时候如果不需要使用数组类的排序等方法,只是进行一般的赋值和访问,应该直接写
var array = {};
而不是
var array = new Array();
否则这就和定义一个数字变量时写var i = new Number(1)一样没有意义
8.使用jQuery时,对同一个对象执行多个函数尽量放在同一行代码里,例如:
$("p.neat").addClass("ohmy").show("slow");
而不是
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");
其余的技巧还有使用DocumentFragment优化多次append,使用firstChild和nextSibling代替childNodes遍历dom元素等。
具体大家可以参考这篇博客:http://www.nowamagic.net/librarys/veda/detail/363
本文还参考了这篇文章:http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html
1.JavaScript是唯一一个对代码体积要求越小越好的语言,因此我们可以通过一些工具来精简和压缩JavaScript代码,如JSMin、Packer、YUICompressor等。这些工具会将局部变量的名字替换成很短的变量名,例如将parseFloat()替换成a()。因此我们在编写JavaScript代码时,应将每一个全局变量都映射到一个局部变量,如var parseFloat = parseFloat;
2.通过JSLint来检测你编写的JavaScript,可以发现里面隐藏的很多问题。JSLint是一个JavaScript验证工具(非开源),可以扫描JavaScript源代码来查找问题。如果JSLint发现一 个问题,JSLint就会显示描述这个问题的消息,并指出错误在源代码中的大致位置。
3.我们在写JavaScript的时候经常需要遍历一个数组,代码如下:
复制代码 代码如下:
for (var i=0;i
}
JavaScript的成员变量是运行时确定的,这就导致每一次循环都需要查找数组length属性,因此我们可以增加一个变量来存储数组大小:
复制代码 代码如下:
var l = array.length;
for (var i=0;i
}
这样看起来已经优化得不错了,但实际上我们可以做得更好:
复制代码 代码如下:
var i=array.length;
while(i--){
//do something
}
这是因为这两行代码转换成汇编时,while语句所需的指令更少,在这里就不展开说明了,大家有兴趣可以去研究下汇编。
4.由于JavaScript中任何人都可以修改或添加Object.prototype中的属性,因此我们在遍历一个对象的属性时,应先使用hasOwnProperty进行判断,避免遍历整个原型链,影响效率。如:
复制代码 代码如下:
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//do something
}
}
5.在使用undefined的时候先定义一个局部变量undefined
复制代码 代码如下:
var checkVal = function(val) {
var undefined;
return val !== undefined;
};
上述代码中,如果没有提前定义局部变量,直接使用全局变量undefined进行判断,如果第三方在别的地方定义了一个全局变量undefined=3将导致结果错误。
6.在将一个非字符串类型的变量转换成字符串类型时,可以直接使用
复制代码 代码如下:
var str = (i + "").replace(...);
这个地方如果使用String(i)会慢很多。
7.定义数组的时候如果不需要使用数组类的排序等方法,只是进行一般的赋值和访问,应该直接写
复制代码 代码如下:
var array = {};
而不是
复制代码 代码如下:
var array = new Array();
否则这就和定义一个数字变量时写var i = new Number(1)一样没有意义
8.使用jQuery时,对同一个对象执行多个函数尽量放在同一行代码里,例如:
复制代码 代码如下:
$("p.neat").addClass("ohmy").show("slow");
而不是
复制代码 代码如下:
$("p.neat").addClass("ohmy");
$("p.neat").show("slow");
其余的技巧还有使用DocumentFragment优化多次append,使用firstChild和nextSibling代替childNodes遍历dom元素等。
具体大家可以参考这篇博客:http://www.nowamagic.net/librarys/veda/detail/363
本文还参考了这篇文章:http://www.cnblogs.com/justinw/archive/2009/12/07/1618500.html
上一篇: sql注入失败
推荐阅读
-
加载 Javascript 最佳实践_javascript技巧
-
jQuery右下角旋转环状菜单特效代码_javascript技巧
-
js控制容器隐藏出现防止样式变化的两种方法_javascript技巧
-
window.addeventjs事件驱动函数集合addEvent等_javascript技巧
-
Javascript中Eval函数的使用说明_javascript技巧
-
JavaScript 嵌套函数指向this对象错误的解决方法_javascript技巧
-
如何调试异步加载页面里包含的js文件_javascript技巧
-
用document.documentElement取代document.body的原因分析_javascript技巧
-
一个可拖拽列宽表格实例演示_javascript技巧
-
如何用js 实现依赖注入的思想,后端框架思想搬到前端来_javascript技巧