是否有适用于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();