JavaScript 性能提升之路（推薦）

在平時(shí)工作做項(xiàng)目的過程中我們有時(shí)候會(huì)遇到頁面加載很久才加載出來的情況，這樣嚴(yán)重影響了用戶的體驗(yàn)效果。雖然說有時(shí)候可能是因?yàn)榫W(wǎng)絡(luò)問題，但有些時(shí)候確實(shí)是前端代碼沒有足夠優(yōu)化導(dǎo)致的。所以通過查閱相關(guān)資料并實(shí)踐后，總結(jié)出如下知識(shí)點(diǎn)來提升性能。有什么寫得不對的地方還希望各路大神指出并加以指點(diǎn)。

1、數(shù)據(jù)訪問

1、將所有script標(biāo)簽放在盡可能接近body標(biāo)簽底部的位置，盡可能減少對整個(gè)頁面下載的影響。

2、盡量少用全局變量。因?yàn)樽兞吭谧饔糜蜴溨械奈恢迷缴?，訪問的時(shí)間就越長。局部變量位于作用域鏈中的第一個(gè)對象中，全局變量總是位于作用域鏈的最后一環(huán)，所以全局變量總是最慢的。

3、避免全局查詢，如果一定要用到全局變量時(shí)，并且需要在某個(gè)函數(shù)中多次用到該全局變量時(shí)，可以定義一個(gè)局部變量指向全局變量，來縮短在作用域鏈中的查詢深度。

 function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (trackNode[j]["userId"] == allChildrenNode[i]) {
          trackNode[j]["isOnMap"] = true;
        }
      }
    }
  }

上面代碼可以改寫為如下所示

  function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	var track=trackNode;
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (track[j]["userId"] == allChildrenNode[i]) {
          track[j]["isOnMap"] = true;
        }
      }
    }
  }

4、將集合的length屬性用一個(gè)局部變量來保存，在迭代中使用該變量。

 for (var j=0,len=track.length;j<len;j++) 

5、避免使用with表達(dá)式，因?yàn)樗黾幼饔糜蜴湹拈L度。而且應(yīng)當(dāng)小心的對待try-catch的catch子句，它具有同樣效果。

6、一個(gè)屬性或方法在原型鏈中的位置越深，它的訪問速度就越慢。

7、聲明變量時(shí)，多個(gè)變量合并聲明，可以減少內(nèi)存消耗。

 var a;
  var b;
  var c;
  //推薦
  var a,b,c

2、Dom操作

Dom（文檔對象模型）是一個(gè)獨(dú)立于語言的，使用xml和html文檔操作的應(yīng)用程序接口。在瀏覽器中的接口卻是以javascript來實(shí)現(xiàn)的。Dom和javascript看成兩座島，兩者之間通過一座收費(fèi)的橋連接。一般建議盡量留在javascript島上。

1、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

 //dom方式
  var str=""
  var dom=document.getElementById("test");
  var start1=new Date();
  for(var j=0;j<100000;j++){
  	var div=document.createElement("div");
  	div.innerText="test";
  	dom.append(div);					
  }
  var end1=new Date();
  console.log("dom方式:"+(end1-start1));//dom方式:356
  
  //inerHTML方式
  var content="";
  var start=new Date();
  for(var i=0;i<10000;i++){
    content=content+"<div>test</div>";
  }
  document.getElementById("test").innerHTML=content;
  var end=new Date();
  console.log("innerHTML方式:"+(end-start));//innerHTML方式:35

2、如果統(tǒng)一個(gè)Dom元素或集合被訪問一次以上，最好使用一個(gè)局部變量來緩存此Dom成員，在循環(huán)中使用局部變量緩存集合引用和集合元素會(huì)提升速度。

3、遍歷children比childNodes更快。children不區(qū)分（包括）注釋節(jié)點(diǎn)和空文本節(jié)點(diǎn)，所以快一些。

4、使用element.cloneNode(bool)復(fù)制節(jié)點(diǎn)，bool為false表示淺復(fù)制，只復(fù)制當(dāng)前節(jié)點(diǎn)，bool為true時(shí)，表示深復(fù)制，還會(huì)復(fù)制其子節(jié)點(diǎn)。這種方式比document.createElement()速度要快一些。

5、使用document.querySelector和document.querySelectorAll("div.warning,div.notice")來快速查找。因?yàn)樗鼈兎祷匾粋€(gè)NodeList——由符合條件的節(jié)點(diǎn)構(gòu)成的類數(shù)組對象，而不是HTML集合（總是表現(xiàn)出存在性），避免了它所固有的性能問題（以及存在的邏輯問題）。querySelectorAll("div.warning,div.notice")還可以進(jìn)行聯(lián)合查詢。

6、修改樣式時(shí)，可以使用div.style.cssText來一起修改樣式，或者使用類來修改（便于維護(hù)）。

var el = document.getElementById('mydiv');
   //修改3次Dom
  el.style.borderLeft = '1px';
  el.style.borderRight = '2px';
  el.style.padding = '5px'；
  //推薦只需要修改1次Dom
  el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;' 

7、盡量避免寫在HTML標(biāo)簽中寫Style屬性，使用外聯(lián)樣式便于維護(hù)和修改。

8、避免圖片和iFrame等的空Src?？誗rc會(huì)重新加載當(dāng)前頁面，影響速度和效率。

9、采用事件委托。元素連接事件句柄會(huì)影響頁面性能，采用委托利用事件冒泡的性能減少元素連接事件。（事件掛接過程都是發(fā)生在onload或DOMContentReady）事件中。

3、循環(huán)

1、for-in是四種循環(huán)方法中速度最慢的一種，一般用于循環(huán)對象（需要查找自身屬性還是原型屬性）。不建議循環(huán)數(shù)組。除非要迭代遍歷一個(gè)屬性未知的對象，否則一般不用for-in。

2、改變循環(huán)條件的順序來提高循環(huán)性能。

 //推薦
  for(var i=items.length;i--;){
    //todo
  }
  //不推薦
  for(var i=0,len=items.length;i<len;i++){
    //todo
  }  

3、通過減少循環(huán)體來優(yōu)化性能。

以上所述是小編給大家介紹的JavaScript性能提升詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！