Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

測量執行時間和對執行進行計數

利用 Console API 測量執行時間和對語句執行進行計數。

TL;DR

  • 使用 console.time()console.timeEnd() 跟蹤代碼執行點之間經過的時間。
  • 使用 console.count() 對相同字符串傳遞到函數的次數進行計數。

測量執行時間

time() 方法可以啓動一個新計時器,並且對測量某個事項花費的時間非常有用。將一個字符串傳遞到方法,以便爲標記命名。

如果您想要停止計時器,請調用 timeEnd() 並向其傳遞已傳遞到初始值設定項的相同字符串。

控制檯隨後會在 timeEnd() 方法觸發時記錄標籤和經過的時間。

基本示例

在這裏,我們將測量 100 萬個新 Array 的初始化:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

將在控制檯中輸出下列結果: 經過的時間

Timeline 上的計時器

Timeline 記錄在 time() 操作期間發生時,它也會對 Timeline 進行標註。如果您想要跟蹤應用的操作和操作來自何處,請使此記錄。

執行 time() 時 Timeline 上的標註如下所示:

timeline 上的時間標註

標記 Timeline

Note: timeStamp() 方法只能在某個 Timeline 記錄正在進行時發揮作用。

Timeline 面板可以提供引擎時間消耗的完整概覽。您可以使用 timeStamp() 從控制檯向 Timeline 添加一個標記。 這是一種將您應用中的事件與其他事件進行關聯的簡單方式。

timeStamp() 會在以下地方對 Timeline 進行標註:

  • Timeline 彙總和詳細信息視圖中的黃色垂直線。
  • 會向事件列表添加一條記錄。

以下示例代碼:

function AddResult(name, result) {
    console.timeStamp("Adding result");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

將生成下面的 Timeline 時間戳:

Timeline 中的時間戳

對語句執行進行計數

使用 count() 方法記錄提供的字符串,以及相同字符串已被提供的次數。當完全相同的語句被提供給同一行上的 count() 時,此數字將增大。

count() 與某些動態內容結合使用的示例代碼:

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);

代碼示例的輸出:

console.count() example output