高效率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高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
移动端js图片查看器
Nov 17 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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
新浪新闻小偷
2006/10/09 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
php扩展开发入门demo示例
2019/09/23 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
使用python接入微信聊天机器人
2020/03/31 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
店面出租协议书范本
2014/11/28 职场文书
高老头读书笔记
2015/06/30 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书