Skip to main content

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>