高效率JavaScript编写技巧整理


Posted in Javascript onAugust 23, 2013

最近在编写一个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<array.length;i++){ 
//do something 
}

JavaScript的成员变量是运行时确定的,这就导致每一次循环都需要查找数组length属性,因此我们可以增加一个变量来存储数组大小:
var l = array.length; 
for (var i=0;i<l;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
Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
axios基本入门用法教程
Mar 25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 #Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 #Javascript
jquery $.each() 使用小探
Aug 23 #Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 #Javascript
checkbox使用示例
Aug 23 #Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 #Javascript
You might like
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python判断两个对象相等的原理
2017/12/12 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python绘制圆柱体的方法
2018/07/02 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
实例讲解python中的协程
2018/10/08 Python
Python发展简史 Python来历
2019/05/14 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python实现不规则图形填充的思路
2020/02/02 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
如何把python项目部署到linux服务器
2020/08/26 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
党员公开承诺书范文
2014/03/25 职场文书
创先争优一句话承诺
2014/05/29 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
英语辞职信怎么写
2015/02/28 职场文书
工程质量保证书
2015/05/09 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL