最近在编写一个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

转载请注明出处,谢谢!

高效率JavaScript编写技巧的更多相关文章

  1. JavaScript 实用技巧和写法建议

    1.前言 从大学到现在,接触前端已经有几年了,感想方面,就是对于程序员而言,想要提高自己的技术水平和编写易于阅读和维护的代码,我觉得不能每天都是平庸的写代码,更要去推敲,去摸索和优化代码,总结当中的技 ...

  2. 14条最佳JS代码编写技巧

    http://gaohaixian.blog.163.com/blog/static/123260105201142645458315/写任何编程代码,不同的开发者都会有不同的见解.但参考一下总是好的 ...

  3. JavaScript的技巧45招

    JavaScript奇技淫巧45招 来自仲老师的分享: 原文地址[http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best ...

  4. javascript实用技巧、javascript高级技巧

    字号+作者:H5之家 来源:H5之家 2016-10-31 11:00 我要评论( ) 三零网提供网络编程. JavaScript 的技术文章javascript实用技巧.javascript高级技巧 ...

  5. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  6. 一些JavaScript的技巧、秘诀和最佳实践

    文章分享一些JavaScript的技巧.秘诀和最佳实践,除了少数几个外,不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用. 本文中的示例代码,通过了在Google ...

  7. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  8. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  9. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

随机推荐

  1. Android Studio Module疑问

    ERROR: APK path is not specified for module From your existing project, go to 'File' -> 'Project ...

  2. Notes里OK,CANCEL按钮的设定

    message并不能达到想要的目的: If Not udoc Is Nothing Then        'MessageBox "既にデータがあります.先月のデータを削除してください.& ...

  3. PICT安装及使用

    一:PICT安装 1.下载pict33.msi:http://vdisk.weibo.com/s/d6k2tcgXDa7Eq 2.安装: 二:PICT的使用 1.在F:\PICT 目录下,新建一个tx ...

  4. 全数字锁相环(DPLL)的原理简介以及verilog设计代码

    随着数字电路技术的发展,数字锁相环在调制解调.频率合成.FM 立体声解码.彩色副载波同步.图象处理等各个方面得到了广泛的应用.数字锁相环不仅吸收了数字电路可靠性高.体积小.价格低等优点,还解决了模拟锁 ...

  5. linux c 头文件

    //1.Linux中一些头文件的作用: #include <assert.h> //ANSI C.提供断言,assert(表达式) #include <glib.h> //GC ...

  6. FLAG_ACTIVITY_NEW_TASK和SingleInstance的设计思路(多task的应用)

    这部分的想法都是基于以下两点: 1.Activity可能被复用,可能是复用Activity的功能,还可能是复用Activity的状态: 2.Task的作用:target,同一个task中的Activi ...

  7. 提高Delphi的编译速度(bpl和bcp)

    delphi的编译速度提高(一) 此博文为原创,转载请注明出处 作者 :二娃 此博文的内容我曾经回答群内和论坛内的网友提问时回答过,现在写第一部分,第二部分,我再给出一个终极的提高速度的方法 我用过d ...

  8. openStack images概念及维护

    更改以创建镜像的属性 glance image-update img-uuid --property architecture=arm --propertyhypervisor_type=qemu C ...

  9. python 正则表达式 学习笔记(不断补充ing)

    本文参考了以下博客,感谢众位大神的分享! http://www.oschina.net/question/12_9507 和 http://www.crifan.com/python_re_sub_d ...

  10. PHP 面向对象:设计模式之单例模式

    单例模式要解决的问题就是“如何让这个类只有一个实例”. 我们的web应用中,大量使用了数据库连接,如果反复建立与数据库的连接必然消耗更多的系统资源. 我们如何解决这个问题,建立唯一的数据库连接是必要的 ...