高效率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 一道字符串分解的题目
Aug 03 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
实例详解带参数的 npm script
May 28 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
处理及遍历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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
node.js的事件机制
2017/02/08 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
TensorFlow变量管理详解
2018/03/10 Python
python构建深度神经网络(续)
2018/03/10 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python类继承和多态原理解析
2020/02/05 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
优秀求职信范文分享
2014/01/26 职场文书
企业指导教师评语
2014/04/28 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
婚前协议书范本
2014/10/27 职场文书
初中信息技术教学计划
2015/01/22 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
电影复兴之路观后感
2015/06/02 职场文书