JavaScript 速度測試 使用 Performance.Timing 紀錄

JavaScript 想要測試 function、UI、DOM 等等的速度，要怎麼做呢？

JavaScript 速度測試 使用 Performance.Timing 紀錄

JavaScript 於 Chrome 可以使用下述參數：

下述內容參考此篇：Primer on Web Performance (註：下面印出來的各個參數說明，要參考此篇有圖片說明)

JavaScript 寫這隻 Function logPerformance()：

function logPerformance() {
    var perfEntries = performance.getEntriesByType("mark");
    for (var i = 0; i < perfEntries.length; i++) {
                console.log("Name: " + perfEntries[i].name +
                " Entry Type: " + perfEntries[i].entryType +
                " Start Time: " + perfEntries[i].startTime +
                " Duration: "   + perfEntries[i].duration  + "\n");
    }
    console.log(performance.timing);
}

要測試速度的 functon，要用 performance 包起來，最後再由 logPerformance() 印出到 console.log()

performance.mark("startTask1");
// test function();、code...
performance.mark("endTask1");
logPerformance();

到 chroem console 可看到下述：

ame: startTask1 Entry Type: mark Start Time: 141.39000000000001 Duration: 0
index.php:7 Name: endTask1 Entry Type: mark Start Time: 146.245 Duration: 0
PerformanceTiming
connectEnd : 1489137882464
connectStart : 1489137882451
domComplete : 1489137882628
domContentLoadedEventEnd : 1489137882617
domContentLoadedEventStart : 1489137882614
domInteractive : 1489137882614
domLoading : 1489137882491
domainLookupEnd : 1489137882451
domainLookupStart : 1489137882445
fetchStart : 1489137882439
loadEventEnd : 1489137882682
loadEventStart : 1489137882628
navigationStart : 1489137882438
redirectEnd : 0
redirectStart : 0
requestStart : 1489137882464
responseEnd : 1489137882483
responseStart : 1489137882482
secureConnectionStart : 0
unloadEventEnd : 1489137882483
unloadEventStart : 1489137882483

Save

Save

Save