如何測量腳本執行和*解析*時間？

Question

據我所知，腳本是在JavaScript中同步下載和執行的。 因此，如果我們寫下面的代碼：

<script type='text/javascript'>console.time('core')</script> 
<script type='text/javascript' src="guicore.js"></script> 
<script type='text/javascript'>console.timeEnd('core')</script> 

我們將在控制檯總時間看到下載，解析和執行JS。 我們如何排除解析時間？只需添加類似的文件，但註釋掉所有代碼。或多或少，這種技術應該工作。

問題是這樣的只是不工作=）

我優化的代碼，縮短執行時間的90毫秒從25ms的到，但看到相同的〜100個±10ms的時間Chrome和〜160個±15ms的用於Firefox 。

好吧，我知道我可以使用分析器，但的問題是：「如何正確測量js解析時間」，我測量了什麼btw。 Research.reverse-engineering非常有趣，但也許有人會深入瞭解這個領域。

Answer 1

打開Chrome並打開開發人員工具，進入「時間軸」選項卡。如果按下錄製按鈕（填入圓圈，左下角），然後重新加載頁面，它會給你一個相當詳細的時間表，並細分爲特定類型的活動（發送請求，分析，評估），定時到微秒。

Answer 2

我知道這是一個古老的問題，但我碰到它，同時尋找一個解決方案，我自己。你可以在你選擇的瀏覽器中使用開發工具來看看這個，但如果你想在代碼中這樣做，這是我最終使用的方法。

的scriptLoadParseDuration功能下面將一個URL到.js文件，將其放入一個<script>元件，並記錄載荷/解析持續時間到控制檯。

請記住，這將執行<script>您在當前DOM上下文中分析。因此，在下面的示例中：即使腳本已被刪除，jQuery仍可在全局範圍內訪問。該腳本可以擴展爲在中完成所有這些操作來隔離它。

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 
    
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

這裏是表示jQuery仍處於<script>取出後，在全球範圍內的例子。

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    console.log('`jQuery` before attaching: ' + typeof jQuery); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 

 
    console.log('`jQuery` once attached: ' + typeof jQuery); 
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    console.log('`jQuery` after detach: ' + typeof jQuery); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

Answer 3

了較新的答案很老的問題。

Date.now()返回毫秒準確的時間戳。對於以60FPS運行的應用程序，它必須每16ms更新一次幀。我們的毫秒計可能不夠準確。

在現代JS瀏覽器中引入Performace API，這允許將浮點時間戳精確到微秒。

而不是Date.now()使用window.performance.now()進行測量，有一個很好的指導使用Performance API on HTML5Rocks。