更好的Javascript性能

Question

我目前在React中構建一個應用程序來學習語言。該應用程序是一款遊戲，在遊戲中，我使用Howler.js播放很多聲音。咆哮很棒，因爲它可以讓我輕鬆創作聲音，而且非常重要的是，我可以調整聲音的音高，我可以用一個樣本製作旋律。

我開始運行到時我在不同的音高事情有很多不同的聲音的問題是性能。隨着代碼我已設置循環播放我的聲音對象是相當沉重，我想知道是否有一種方法來優化它（我絕不是一個JavaScript專家，所以我不會感到驚訝，如果有一個更精簡方式來執行聲音對象）。反正這是我的聲音以下對象給你一個想法：

var testTrack = [{ 
     rowId:1, 
     rowExtras:"notExpanded", 
     rowSample: 
      { 
       sampleId:"1", 
       notes:[ 
        { 
         keyNumber:0, 
         noteDelay:0, 
         notePitch:1 
        },{ 
         keyNumber:2, 
         noteDelay:460, 
         notePitch:1 
        },{ 
         keyNumber:4, 
         noteDelay:920, 
         notePitch:1 
        },{ 
         keyNumber:6, 
         noteDelay:1380, 
         notePitch:1 
        },{ 
         keyNumber:8, 
         noteDelay:1840, 
         notePitch:1 
        },{ 
         keyNumber:10, 
         noteDelay:2300, 
         notePitch:1 
        },{ 
         keyNumber:12, 
         noteDelay:2760, 
         notePitch:1 
        },{ 
         keyNumber:14, 
         noteDelay:3220, 
         notePitch:1 
        }        
       ], 
       sampleName:"Heavy Kick", 
       sampleSource:"../../samplesWav/sample1.wav" 
      } 

     },{ ...there are 12 more objects in the array with different samples in them 

這是我在使用循環和玩Howler.js聲音的代碼。請注意，上述對象的生活在我的應用程序狀態this.state.trackObject下：

playTrack(){ 

    var audioArray = this.state.trackObject; 

    for(var i=0; i <= audioArray.length - 1; i++) { 

     var rowObject = this.state.trackObject[i] 

     var notesLength = rowObject.rowSample.notes.length 

     for(var j=0; j <= notesLength - 1; j++) { 
      var notes = rowObject.rowSample.notes[j].noteDelay; 
      var id = rowObject.rowSample.sampleId; 
      var src = rowObject.rowSample.sampleSource; 
      var pitch = rowObject.rowSample.notes[j].notePitch; 

      playSample(id,notes,src,pitch)     
     } 

    } 

    function playSample(id,notes,src,pitch){ 

     if(id != "null"){ 
     setTimeout(function(){ 

     //this is where howler is used 
     var sound = new Howl({ 
       src: [src], 
       rate:pitch 
     }) 

     sound.play();     

     }, notes); 
     } 
    } 


} 

我嘗試做盡可能多的事情，我可以在「陣營」的方式，但我還在學習，以便不確定是否有更好的方式來整合Play功能和我的Apps狀態以獲得更好的瀏覽器性能。

我已經想過使用音頻精靈（這實際上是建立在吼工作得很好）。我試過用這個here。我實際上有一個安裝問題，coudln't讓它運行，但即使我設法解決這個問題，那麼我不認爲我可以添加聲音與從howler API應用到精靈的音高彎曲？

謝謝，我歡迎對性能/解決方案的人可能有什麼建議！

Answer 1

我不知道你的遊戲是如何工作的，但也許你並不需要遍歷整個陣列上。如果您將聲音存儲在散列中，並通過某個唯一標識符（可能是聲音名稱？）訪問它們，則這應該會顯着提高性能。

因此，而不是代替聲明testTrack作爲像這樣的陣列的...

var testTrack = [{ 
    rowId:1, 
    rowExtras:"notExpanded", 
    rowSample: { // Code removed for brevity } 
},{ 
    rowId:2, 
    rowExtras:"notExpanded", 
    rowSample: { // Code removed for brevity } 
}]; 

聲明它像這樣...

var testTrack = { 
    "track1": { 
    rowId:1, 
    rowExtras: "notExpanded", 
    rowSample: { } 
    }, 
    "track2": { 
    rowId:2, 
    rowExtras:"notExpanded", 
    rowSample: { } 
    } 
}; 

然後訪問使用下面的方法之一的元件，其中「track1」將是聲音名稱...

var myTrack = testTrack.track1; 
var myTrack = testTrack['track1']; 

不確定這是否合理你的遊戲的上下文，但這至少可以幫助你重複整個循環。