如何閱讀鉻開發控制檯配置文件圖表

我很新的Chrome JS控制檯。現在我剛剛開始使用分析工具來記錄：

說我有一個非常簡單的函數調用堆棧：

<script type="text/javascript"> 
    function hello(){ 
     var n = Math.random()*100; 
     if(n>50){ 
      return "Hello!" 
     }else { 
      return "Nihao!" 
     } 
    } 
    function hellosb(name){ 
     console.log(hello()+" "+name); 
    } 
    function show(){ 
     var sum = 0; 
     for(var i=0; i<10; i++){ 
      for(var j=0; j<10; j++){ 
       hellosb(i*j+""); 
      } 
     } 
    } 
    show(); 
</script>

我總覺得造成這樣的（部分相關的調用堆棧）：

我不知道如何讀它，例如：

應該有多次調用hellosb（）和hello（），它只在圖表中顯示一個，我可以在哪裏找到它們？
如果有一些異步事件調用，我該如何跟蹤其調用者？

來源

2015-09-14 Kuan

您已將滾動條設置爲顯示1628ms到1656ms之間的活動，間隔爲28ms。你在看什麼是當時發生的事情的倒轉火焰圖。正如您所看到的，它主要用於致電console.log致電hellosb()的show()。看起來像一個電話可能是多次電話。

看起來好像Chrome Dev Tools Profiler是一個堆棧採樣分析器，所以它不可能看到非常短暫的情況，例如返回時間爲hellosb，下一次調用時間。此外，請注意，它不報告調用了多少次hellosb或其他例程，這很有意義，因爲採樣器不計算呼叫。

這是好的，因爲分析的通常目的是查找負責大部分時間（不是很小部分）的代碼，因此您可以查看它是否可以刪除它正在執行的任何操作。這並不需要知道代碼執行了多少次。如果執行次數過多，可以在調用者中看到。

來源

2015-09-14 19:07:47

謝謝，我想澄清的一件事：所以你的意思是，這些hello（）調用不會被Chrome捕獲，對吧？如果是這樣，這是否意味着顯示調用堆棧的圖表也可能是錯誤的？（例如，淺紫色hello（）不應該與其他日誌處於同一水平） – Kuan

@Kuan：我認爲這不是錯誤的。 'hellosb'被稱爲100次，但兩次通話之間的時間非常短，以至於沒有樣本在這些間隔中出現，所以它看起來像是一次長時間的呼叫。這並不奇怪。另一方面，'hellosb'花費部分時間調用'log'，一部分時間調用'hello'，這從寫入的方式來看是有意義的。這裏沒有錯。抽樣分析器不關注功能進入或退出的事件，正如我試圖說的那樣，沒關係，因爲這些事件並不重要。 –

如何閱讀鉻開發控制檯配置文件圖表

回答

相關問題