html - HTML5 Web アプリのパフォーマンス ベンチマーク ツールはありますか?

Question

モバイル Web アプリのテストに使用できるパフォーマンス ベンチマーク ツールまたはベスト プラクティスはありますか?

Answer 1

Google chrome にはプロファイラーがあります。別のブラウザーでボトルネックを実際に探している場合を除き、これは役に立ちます。

https://developers.google.com/chrome-developer-tools/docs/cpu-profiling

Answer 2

以下のコードの行に沿って、主要なコードブロックの実行時間を測定して、ボトルネックを見つけることができます。ターゲットモバイルデバイスでこの種の測定を使用してアプリを実行し、ログファイルを調べて実行時間を見つけることで、アプリのパフォーマンスを大幅に向上させることができました。

MeasureExecution = {
    timers: {},
    start: function(name){
        MeasureExecution.timers[name] = new Date().getTime();
    },
    stop: function(name){
        console.log("Execution time for '"+name+"'="+Math.abs(MeasureExecution.timers[name] - new Date().getTime())+"ms");
        delete MeasureExecution.timers[name];
    }
};

MyApp = {
  init: function(){
      // Do some initialisation stuff
      MeasureExecution.start("init");
      MyApp.doExpensiveStuff(); 
      MeasureExecution.stop("init");

      // Do some asynchronous stuff
      for(var i=0; i<10; i++){
          MyApp.startAsync(i);
      }         
  },

  doExpensiveStuff: function(){
      for(var i=0; i<10000; i++){
        for(var j=0; j<10000; j++){
        }    
      }
  },

  startAsync: function(id){
      MeasureExecution.start("async-"+id);
      window.setTimeout(function(){          
        MyApp.doAsync(id);                                 
      }, Math.floor(Math.random() *100));          
  },
  doAsync: function(id){
      MyApp.doExpensiveStuff();       
      MeasureExecution.stop("async-"+id);
  }     
};

MyApp.init();