JavaScript 代码性能优化总结
本文转自:http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400360237&idx=2&sn=eb00241cb3b61ffb81b7dea862dc936f&scene=23&srcid=1027psyzZXVbBVCfXTGWnaAv#rd
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 下面是我总结的一些小技巧,仅供参考。 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出。 A:尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢。浏览器已经实现的方法,就不要再去实现一遍了。另外,浏览器已经实现的方法在算法方面已经做了很多优化。 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。 <script> function search() { //当我们要使用当前页面地址和主机域名 console.log(window.location.href + window.location.host); } //最好的方式如下这样,先用一个简单变量保存起来 function search() { var location = window.location; console.log(location.href + location.host); } </script> B:尽量减少循环次数 少一层循环,就能提高数倍性能。如果要对一个数组的每个元素进行多次操作,尽可能使用一次循环,多次操作,而不是多次循环,每次循环执行一次操作。尤其是在进行多个正则匹配的时候,尽可能合并正则表达式,在一次遍历中尽可能找到相应的匹配。 循环 <script> //通常循环的写法 var objs = [{ 'key': 'obj1' }, { 'key': 'obj2' }, { 'key': 'obj3' }]; //len 定义一个变量; for (var i = 0, len = objs.length; i < len; i++) { dosomething(objs[i]); } //当循环遍历的对象是object时,可以采用下面的方式来写; var objs2 = [{ 'key': 'obj1' }, { 'key': 'obj2' }, { 'key': 'obj3' }], obj, i = 0; while (obj = objs2[i++]) {//先赋值在判断;这种思想得掌握 dosomething(obj); //备注:如果数组里面可能出现0,false,null等在条件判断为false的值,这种写法是不正确的; } function dosomething(val) { console.log(val); } </script> switch的补充点; <script> var con = 'a'; function funa() { }; function funb() { }; function func() { }; //通常的写法 switch (con) { case 'a': funa(); break; case 'b': funb(); break; case 'c': func(); break; } //换种写法试试 var funs = { 'a': funa, 'b': funb, 'c': func }; funs[con](); //备注:取值或者函数调用可以用类似的方法来做; </script> C: 条件分支: 将条件分支,按可能性顺序从高到低排列:可以减少解释器对条件的探测次数。 在同一条件 >2条件分支时,使用switch优于if:switch分支选择的效率高于if,在IE下尤为明显。4条分支的测试,IE下switch的执行时间约为if的一半。 使用三目运算符替代条件分支。 <script> var a = 1, b = 2, num; if (a > b) { num = a; } else { num = b; } //建议这种写法:换种写法试试 num = a > b ? a : b; </script> 定时器 如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval,因为setTimeout每一次都会初始化一个定时器,而setInterval只会在开始的时候初始化一个定时器。 <script> var timer = 0; function timeout() { timer++; if (timer < 10) { setTimeout(timeout, 10); } } timeout(); //可以替换为 var interval = 0; function interval() { interval++; if (interval >= 10) { clearInterval(interval); } dosomething(); } var interv = setInterval(interval, 10); //动画效果 function dosomething() { } //一般应用于动画 用做标记的变量尽可能使用布尔类型 直接用true和false做标记,不要使用数字或者字符串的1和0来做标记。 </script> </body> </html>