JavaScript中的console.time()函數詳細介紹_javascript技巧

如果需要在Web偵錯過程中知道程式碼執行的時間，那麼可以透過在JavaScript程式碼中加入console.time()語句和console.timeEnd()語句來對程式的執行進行計時。以下面這個耗時較長的foo()函數為例：

複製程式碼 程式碼如下:

function foo(){
    var x = 4.237;
    var y = 0;
    for (var i=0; i         y = y x*x;
    }
    return y;
}

如果需要知道函數執行過程中消耗了多長時間，可以在foo()函數呼叫之前插入console.time()語句，在其呼叫結束後插入console.timeEnd()語句：

複製程式碼 程式碼如下:

console.time("test");
foo();
console.timeEnd("test");

程式執行完畢後，控制台會顯示此計時的結果：“test: 1797ms”，顯示的日誌等級為info。

console.time()和console.timeEnd()接受一個字串作為參數，該字串相當於計時的id。瀏覽器會將擁有相同參數(id)的console.time()與console.timeEnd()進行配對，記錄兩者之間的時間差。因此，可以透過使用不同的id來對JavaScript程式中不同的地方進行計時。

瀏覽器支援

對於各個瀏覽器，console.time()計時的支援情況如下：

Firefox。 10.0後原生支援。對於先前版本的Firefox，可以透過安裝Firebug外掛程式來實現。詳見：https://developer.mozilla.org/en-US/docs/Web/API/console.time?redirectlocale=en-US&redirectslug=DOM/console.time
Google Chrome。 2.0後原生支援。詳見：https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel
IE。 IE11中原生支援。對於先前版本的IE，可以透過安裝Firebug Lite來實現。詳見：http://msdn.microsoft.com/en-us/library/ie/dn265071(v=vs.85).aspx
Safari。 4.0後原生支援。詳見：https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html
Opera。支持。詳見：http://www.opera.com/dragonfly/documentation/console/