高效率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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
自制PHP框架之设计模式
2017/05/07 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
综合实践活动方案
2014/02/14 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
高三霸气励志标语
2014/06/24 职场文书
婚内房产协议书范本
2014/10/02 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS