A nicer API for performance time measurements in the browser

timing.js

export function create (name) {
  const nameStart = `${name} start`

  window.performance.mark(nameStart)

  return {
    log: () => { log(name) },
    end: () => { end(name) }
  }
}

export function log (name) {
  const duration = end(name)
  console.debug(`${name} in ${duration}ms`)
}

export function end (name) {
  const nameStart = `${name} start`
  const nameEnd = `${name} end`

  window.performance.mark(nameEnd)
  window.performance.measure(name, nameStart, nameEnd)

  const measures = window.performance.getEntriesByName(name)

  if (measures.length > 0) {
    const measure = measures[0]
    return measure.duration
  } else {
    return 0
  }
}

usage.js

import * as timing from './timing'

// Create a timing, then log it later

const _timing = timing.create('a long delay')

setTimeout(() => { _timing.log() }, 8090)

// Create a timing, then manually end it

const _timingName = 'recursive work'

function doTheThing(nestingAmount = 0) {
  if (nestingAmount === 0) {
    timing.create(_timingName)
  }
  
  if (nestingAmount === 1000) {
    timing.log(_timingName)
  }
  
  doTheThing(nestingAmount + 1)
}

doTheThing() // will recurse 1000 times and then log how long that took