高效率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修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 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
php session实现多级目录存放实现代码
2016/02/03 PHP
php经典趣味算法实例代码
2020/01/21 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python内建模块struct实例详解
2018/02/02 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python自动发微信监控报警
2019/09/06 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
三爱活动实施方案
2014/03/19 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
教师批评与自我批评
2014/10/15 职场文书
开业典礼致辞
2015/07/29 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书