高效率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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
CentOS安装php v8js教程
2015/02/26 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
input的focus方法使用
2010/03/13 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python模块future用法原理详解
2020/01/20 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python中SQLite如何使用
2020/05/27 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
大学自我鉴定范文
2013/12/26 职场文书
党员个人对照检查材料
2014/10/01 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
资料员岗位职责范本
2015/04/13 职场文书
前台岗位职责范本
2015/04/16 职场文书
专项资金申请报告
2015/05/15 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python