最近在编写一个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. PHP设计模式之工厂模式(权限分配)

    // 抽象基类 User abstract class User{ protected $name = NULL; // 构造函数 function User($name){ $this->na ...

  2. linux命令学习01-mkdir

    1.环境说明     centos6.7,2.6.32-573.el6.x86_64 2.man mkdir    NAM       mkdir - make directories SYNOPSI ...

  3. SilverlightLoader使用托管代码创建自定义载入界面及动态加载XAP

    Silverlight实现动态加载xap和Splash Screen.收藏! 内容来自 http://silverlightchina.net/html/tips/2010/0115/588.html

  4. C++ 一些容易忽略的基本点

    new 高级应用 delete 其他用途帮助函数严格匹配类型 char teststr[100] = { 0 };// 静态区void test3(){ // 堆区 int *p = new int[ ...

  5. SAR 图像

    http://www.dlr.de/hr/en/desktopdefault.aspx/tabid-2326/3776_read-5679/

  6. 保存网页为图片——滚动截取IE(WebBrowse)

    对IE进行编程一直觉得是相当可怕的事情,里面的接口.函数.事件之多,解释之乱,需要了解的方方面面知识之博,让我仿佛看到了微软就是造物主,因为它已成功制造了这样的混沌,弄就了宇宙的初始状态…… 近来做个 ...

  7. Oracle_系统和对象权限管理

    授予系统权限: GRANT { system_privilege | role } [,{ system_privilege | role }]... ... TO {user | role | PU ...

  8. JAVA实现字符串反转,借助字符数组实现

    public static String reverseStr(String str) { int len = str.length(); char ch[] = str.toCharArray(); ...

  9. swift3.0 扩展、协议(4)

    扩展和协议是swift中的两个特性,用于对已有的类型进行扩展和修改. 扩展(extension) 向已经存在的类型添加新的功能(属性.方法.下标脚本等等),扩展使用extension关键字定义,语法 ...

  10. mac电脑批量解压android apk文件图形化工具--apkDecode

    mac电脑apk文件解压软件,简单的用图形界面将apktools包装了下,使用起来非常简单,可以将apk文件批量解压缩,方便大家查看一些东东,仅供学习目的. 使用步骤如下: 1 下载apkDecode ...