高效率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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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中使用匿名函数操作数据库的例子
2014/11/17 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue实现分页组件
2020/06/16 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
基于python历史天气采集的分析
2019/02/14 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python和c语言的主要区别总结
2019/07/07 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
历史专业学生的自我评价
2014/02/28 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
雷锋的故事观后感
2015/06/10 职场文书
户外拓展训练感想
2015/08/07 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL