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源碼的代碼質量很高，很是值得我等小輩學習。

上面的技巧，如有任何不對，歡迎指正，也歡迎補充～～

過段時間必定要寫源碼閱讀筆記（好怕打臉～～逃）