JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3974061
  • Score
    100M100P100Q202795F
  • License Apache-2.0

Performance timer based on performance.mark() and measure()

Package Exports

  • marky
  • marky/lib/marky.browser.cjs.js
  • marky/lib/marky.browser.es.js
  • marky/lib/marky.cjs.js
  • marky/lib/marky.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (marky) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

marky Build Status

JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations.

For browsers that don't support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime().

Quick start

Install via npm:

npm install marky

Or as a script tag:

<script src="https://unpkg.com/marky/dist/marky.min.js"></script>

Then take some measurements:

var marky = require('marky');

marky.mark('expensive operation');
doExpensiveOperation();
marky.stop('expensive operation');

Why?

mark() and measure() are more performant than console.time() and console.timeEnd(), and more accurate than Date.now(). Also, you get nice visualizations in Chrome Dev Tools:

Chrome Dev Tools screenshot

As well as Edge F12 Tools:

Edge F12 screenshot

Plus, it records PerformanceEntries that you can access through the standard Performance API:

// get all startTimes, names, and durations
var measurements = performance.getEntriesByType('measure');

API

marky.mark() begins recording, and marky.stop() finishes recording:

marky.mark('releaseTheHounds');
releaseTheHounds();
marky.stop('releaseTheHounds');

You can also do more complex scenarios:

function setSail() {
  marky.mark('setSail');
  marky.mark('raiseTheAnchor');
  raiseTheAnchor();
  marky.stop('raiseTheAnchor');
  marky.mark('unfurlTheSails');
  unfurlTheSails();
  marky.stop('unfurlTheSails');
  marky.stop('setSail');
}

marky.stop() also returns a PerformanceEntry:

marky.mark('manTheTorpedos');
manTheTorpedos();
var entry = marky.stop('manTheTorpedos');

The entry will look something like:

{
  "entryType": "measure",
  "startTime": 1974112,
  "duration": 350,
  "name": "manTheTorpedos"
}

Browser support

Marky is tested in the following browsers/environments:

  • IE 9+
  • Safari 8+
  • iOS 8+
  • Android 4.4+
  • Chrome
  • Firefox
  • Edge
  • Node 4+