Here's a simple example that shows how to use the browser Performance API to obtain timing related data in developed scripts.
<!doctype html>
<html>
<head>
<title>User Timing example</title>
</head>
<body onload="init()">
<script type="text/javascript">
var doTask1 = function() {
// do some task...
};
var doTask2 = function() {
// do some other task...
};
function init() {
performance.mark("startTask1");
doTask1(); // Some developer code
performance.mark("endTask1");
performance.mark("startTask2");
doTask2(); // Some developer code
performance.mark("endTask2");
measurePerf();
}
function measurePerf() {
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");
}
}
</script>
<p>
<strong>Source:</strong> <a href="https://w3c.github.io/perf-timing-primer/#flexible-measurement">A Primer for Web Performance Timing APIs</a>
<p>
</body>
</html>