其實在web開發(fā)中，單純因為js導(dǎo)致性能問題的很少，主要都是因為DOM操作引起的临谱。
1查找元素的優(yōu)化
2改變DOM，包括添加奴璃，修改悉默，刪除DOM
3改變DOM的樣式類等
4批量修改DOM
5減少iframe
6樣式放在header中，腳本放在關(guān)閉標(biāo)簽</body>之前
1查找元素的優(yōu)化
因為ID是唯一的苟穆，也有原始的方法抄课，因此使用ID查找元素是最快的，其次的是根據(jù)類和類型查找元素雳旅，通過屬性查找元素是最慢的跟磨，因此應(yīng)該盡可能的通過ID或者類來查找元素，避免通過類來查找元素攒盈。
2改變DOM抵拘，包括添加，修改型豁，刪除DOM
改變DOM就會引起瀏覽器渲染僵蛛，而渲染是相當(dāng)慢的尚蝌，因此應(yīng)該避免不必要的渲染
[javascript] view plain copy
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";
}
改為
[javascript] view plain copy
var str="";
for ( var i=0; i<100; i++ )
{
str += "<SPAN>This is faster because it uses a string! </SPAN>";
}
divUpdate.innerHTML = str;
3改變DOM的樣式類等
改變DOM元素的樣式，類也會導(dǎo)致瀏覽器渲染墩瞳，因此也應(yīng)該減少不必要的操作
[javascript] view plain copy
var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
改為
[javascript] view plain copy
var el = document.getElementById('mydiv');
l.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
4批量修改DOM時從文檔流中摘除該元素 驼壶，對其應(yīng)用多重改變 ，將元素帶回文檔中
這樣可以最小化重繪和重排版 喉酌，
具體方法:
1 隱藏元素热凹，進(jìn)行修改，然后再顯示它泪电。
2將原始元素拷貝到一個脫離文檔的節(jié)點中般妙，修改副本，然后覆蓋原始元素相速。
5減少iframe
iframe需要消耗大量的時間碟渺，并阻塞下載，建議少用
據(jù)說動態(tài)給iframe添加URL可以改善性能突诬，未做測試
6樣式放在header中苫拍，腳本放在關(guān)閉標(biāo)簽</body>之前
樣式放在header中，可以加快渲染旺隙，腳本放在關(guān)閉標(biāo)簽</body>之前可以加快下載速度绒极，不免阻塞下載。
