javascript编程小技巧

其实主要是性能小技巧。

循环优化

循环体是执行最多的，所以要确保其被最大限度的优化.

//提前计算好终止条件，存到局部变量中
for(var i=0, j = document.getElementsByTagName('a').length; i<l; i++){
    // maybe faster
}

//推荐 while循环的效率要优于for(;;)
var i=document.getElementsByTagName('a').length;
while(i--){
   
}

// 据说是最快的  后测试循环
do{
   // maybe fastest
}while(i--)

避免 for-in 循环

for(in)的效率极差，因为它需要查询散列键，只要可以，就应该尽量少用

//要遍历一个集合内的元素，用for,while,do..while代替
//这是vue源码中的一段，作者用for(;;)循环代替了for...in
var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }

多个类型一起声明

var option='option';
var event='event';
var method='method';

//可替换为 
var option='option',
    event='event',
    method='method';
    

类型转换

+'010' === 10; //+可以把字符串变成整数
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';//也可以把整数变成字符串

+new Date() // timestamp
+new Date;

使用三目运算符替代条件分支

//将条件从最可能到最不可能进行排列,减少探测次数
 if (a > b) {
    num = a;
} else {
    num = b;
}
//可以替换为：
num = a > b ? a : b;

巧用||和&&布尔运算符

//源码中这种运算符操作很多，尤其是jQuery源码
item && item.$value || item;
var id = typeof asset === 'function' ? asset.options && asset.options.name || asset.id : asset.name || asset.id;

用局部变量代替全局变量

无论是DOM节点，普通变量，还是对象属性，若需重复使用，通通存成局部变量，避免多次取值的调用开销

 //vue源码
var p = Cache.prototype;
p.put = function (key, value) {}

//jquery源码
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;

DOM节点链式操作

//链式操作会自动缓存
$('.test').find('.btn').css('backgroundColor','#f30').click();

修改CSS类，而不是样式

尤其是在修改多个样式时，修改css类只会引起一次回流，而修改样式会引起多次回流。

插入迭代器

var name=values[i]; 
i++;

//替换为
var name=values[i++]

使用字面量

var aTest = new Array(); 
var aTest = new Object; 
var reg = new RegExp(); 
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";

//分别替换为
var aTest = []; 
var aTest = {}; 
var reg = /\d/i; //只在有变量时才用new RegExp()
var oFruit = { color: "red", name: "apple" };

使用一次innerHTML赋值代替构建dom元素

var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

尽量使用原生方法

var container = document.createElement('div');
container.appendChild(el.cloneNode(true));

避免with语句

with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，所以能不用的时候就不要用。

with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替换为：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

ps:有些代码性能虽高，但是可能会降低阅读性与可维护性，或者与团队的规范冲突，所以这个需要自己在可读性，团队规范性与代码性能之间权衡。

感言

上面罗列的都是我觉得经常会用到的，看一遍，用心记一下，很easy～～可能以后会不定时更新，看自己get到的情况～～

我也是最近才注意到这些“潜规则”，正巧最近也在看vue的源码，然后就发现:基本上网上能查到的性能优化的方面，或者编程的技巧都能在vue源码中找到佐证。vue源码的代码质量很高，非常值得我等小辈学习。

上面的技巧，若有任何不对，欢迎指正，也欢迎补充～～

过段时间一定要写源码阅读笔记（好怕打脸～～逃）