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源码的代码质量很高，很是值得我等小辈学习。

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

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