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

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

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

2、盡量少用全局變量。因為變量在作用域鏈中的位置越深，訪問的時間就越長。局部變量位于作用域鏈中的第一個對象中，全局變量總是位于作用域鏈的最后一環(huán)，所以全局變量總是最慢的。

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

 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屬性用一個局部變量來保存，在迭代中使用該變量。

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

5、避免使用with表達(dá)式，因為它增加作用域鏈的長度。而且應(yīng)當(dāng)小心的對待try-catch的catch子句，它具有同樣效果。

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

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

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

2、Dom操作

Dom（文檔對象模型）是一個獨立于語言的，使用xml和html文檔操作的應(yīng)用程序接口。在瀏覽器中的接口卻是以javascript來實現(xiàn)的。Dom和javascript看成兩座島，兩者之間通過一座收費的橋連接。一般建議盡量留在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)一個Dom元素或集合被訪問一次以上，最好使用一個局部變量來緩存此Dom成員，在循環(huán)中使用局部變量緩存集合引用和集合元素會提升速度。

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

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

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

6、修改樣式時，可以使用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會重新加載當(dāng)前頁面，影響速度和效率。

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

3、循環(huán)

1、for-in是四種循環(huán)方法中速度最慢的一種，一般用于循環(huán)對象（需要查找自身屬性還是原型屬性）。不建議循環(huán)數(shù)組。除非要迭代遍歷一個屬性未知的對象，否則一般不用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性能提升詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論