Profiler

Measure and visualize multiple quantities over time.

Configured to measure a function's execution duration by default, but can be customized to measure anything.

Integrates 0b5vr's tweakpane-plugin-profiler.

See <FpsGraph> for a simpler alternative optimized for framerate visualization.

Usage outside of a <Pane> component will implicitly wrap the profiler in <Pane position="inline">.

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations.

---

Example

Demo

Code

ProfilerExample.svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import {
    Profiler,
    type ProfilerMeasure,
    Slider,
  } from 'svelte-tweakpane-ui'

  // This is a readonly function handle assigned by Profiler component
  // first used in onMount since it is not bound until then
  let measure: ProfilerMeasure

  let loopExponent = 1

  // Helper to test Math functions
  function hardWork(
    function_: (n: number) => number,
    exponent: number,
  ): void {
    measure(function_.name, () => {
      for (let sum = 0; sum < Number('1e' + exponent); sum++) {
        function_(sum)
      }
    })
  }

  onMount(() => {
    let animationFrameHandle: number

    // Nesting measurements creates a hierarchy
    // in the Profile visualization
    function tick() {
      measure('Tick', () => {
        measure('Trigonometry', () => {
          hardWork(Math.sin, loopExponent)
          hardWork(Math.cos, loopExponent)
          hardWork(Math.tan, loopExponent)
          hardWork(Math.atan, loopExponent)
          hardWork(Math.acos, loopExponent)
          hardWork(Math.acosh, loopExponent)
        })
        measure('Logarithms', () => {
          hardWork(Math.log, loopExponent)
          hardWork(Math.log10, loopExponent)
          hardWork(Math.log1p, loopExponent)
          hardWork(Math.log2, loopExponent)
        })
        measure('Rounding', () => {
          hardWork(Math.round, loopExponent)
          hardWork(Math.floor, loopExponent)
          hardWork(Math.ceil, loopExponent)
          hardWork(Math.fround, loopExponent)
        })
      })

      animationFrameHandle = requestAnimationFrame(tick)
    }

    tick()

    return () => {
      cancelAnimationFrame(animationFrameHandle)
    }
  })
</script>

<Profiler bind:measure label="Profiler" />
<Slider
  bind:value={loopExponent}
  min={1}
  max={5}
  label="Loop Exponent (Careful)"
  step={1}
/>

---

Props

measure bindablereadonlyoptional
Description	Function handle that wraps another function to measure its execution duration. If you want to measure something other than execution duration, customize ProfilerBladeDefaultMeasureHandler.
Type	ProfilerMeasure
Example	measure('Hard Work', () => { ... });

measureAsync bindableasyncreadonlyoptional
Description	Async variation of function handle that wraps another function to measure its execution duration.
Type	ProfilerMeasureAsync
Example	measureAsync('Hard Work', async () => { ... });

bufferSize optional
Description	Number of duration samples from which to calculate the delta value when calcMode is 'mean' or 'median'.
Type	number
Default	30

calcMode optional
Description	How to calculate the delta value. 'frame' takes only the latest sample into account, while 'mean' and 'median' are calculated from the samples in the buffer.
Type	ProfilerCalcMode
Default	'mean'

deltaUnit optional
Description	Label suffix for the delta values shown in the control. Possibly useful if you're using a custom ProfilerBladeDefaultMeasureHandler and are measuring something other than time.
Type	string
Default	'ms'

fractionDigits optional
Description	Precision of the delta values shown in the control.
Type	number
Default	2

interval optional
Description	Milliseconds between updates to the profiler visualization and delta label text. Note that this does not affect the internal sampling rate of the profiler itself, which is determined by your calls to the bound measure function.
Type	number
Default	500

label optional
Description	Text displayed next to the profiler visualization.
Type	string
Default	undefined

measureHandler optional
Description	Function wrapping the measure function. The default is fine for most cases when you want to measure a temporal duration.
Type	{ measureStart: () => () => number | Promise<number>; }
Default	new ProfilerBladeDefaultMeasureHandler()

targetDelta optional
Description	Determines the horizontal scale and color mapping of the profiler visualization bars.
Type	number
Default	16.67 60fps.

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

theme optional
Description	Custom color scheme.
Type	Theme
Default	undefined Inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().

---

Events

change
Description	Fires when the overall delta value changes, passing the latest measurement. Note that the values described in the ProfilerChangeEvent type are available on the event.detail parameter.
Type	ProfilerChangeEvent