より良いJavaScriptのパフォーマンス

Question

私は現在、言語を学ぶためにReactでアプリケーションを構築しています。アプリはゲームであり、ゲーム内では私はHowler.jsを使ってたくさんの音を出しています。ハウラーは音を簡単に作り出すことができ、とても重要なのは音の音程を調整することができ、ただ1つのサンプルでメロディーを作り出すことができるので素晴らしいです。

パフォーマンスが異なるピッチで多くの異なるサウンドを持っているとき、私が苦労し始めている問題はパフォーマンスです。コードでは、私のサウンドオブジェクトをループするように設定してありますが、かなり重いので、それを最適化する方法があるのか​​どうか疑問に思っています（私は決して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); 
     } 
    } 


} 

は「リアクト」のように、私はできる限りのことをやろうが、私はまだそうではない学びましたブラウザのパフォーマンスを向上させるために、再生機能とApps状態を統合する方がよいかどうかを確認してください。

私はオーディオスプライトを使用することを考えました。実際にハウラーではうまく動作するように設定されています。私はこの1つを使って試しましたhere。私は実際にインストールの問題があって、それを稼働させることはできませんでしたが、それを修正しても、ハウラー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']; 

あなたのゲームのコンテクストですが、これは少なくともループ全体を反復する手間を省きます。