高效率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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 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
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
详解Python正则表达式re模块
2019/03/19 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
想学画画?python满足你!
2020/12/24 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
质量保证书范本
2014/04/29 职场文书
健康教育评估方案
2014/05/25 职场文书
优秀团队申报材料
2014/12/26 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
修改并编译golang源码的操作步骤
2021/07/25 Golang
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android