IconVault logoIconVault
Sign in

Performance API Lab - Interactive Lab | IconVault

Explore marks, measures, PerformanceObserver, navigation and resource timing in one place. Free, runs fully in your browser.

All tools

Performance API Lab

Marks, measures, observers and timelines in one explorer

5 of 5 free uses left
timeOrigin 0now() 1791494230628.0msperformance.now() is a high-resolution monotonic clock, immune to system clock changes. Every measurement here uses it.

Marks and measures

Drop marks around real work and measure the gap.

No marks yet.

PerformanceObserver entries

Buffered paint and navigation entries appear instantly; longtasks appear when the main thread blocks (try "Do 120ms of work").

Nothing observed yet.

Custom code benchmark

Your code runs here, in this page, timed with performance.now().

Navigation and resource timing

How this page itself loaded, from the browser.

No navigation entry available.

Recent resources

Take the data with you

// The core pattern: mark, measure, observe
performance.mark("work-start");
doTheWork();
performance.mark("work-end");
performance.measure("work", "work-start", "work-end");

const obs = new PerformanceObserver((list) => {
  for (const e of list.getEntries()) console.log(e.entryType, e.name, e.duration);
});
obs.observe({ type: "paint", buffered: true });
obs.observe({ type: "largest-contentful-paint", buffered: true });

5 of 5 free uses left.

About this tool

IconVault's Performance API Lab puts the whole Performance API in one explorer: drop marks around real work, measure the gaps, watch PerformanceObserver entries stream in, read this page's own navigation and resource timing, and benchmark your own code with performance.now(). It is free to use and runs fully in your browser with nothing uploaded.

How to use: add marks, run the built-in 120ms workload, start the observer to catch paint, LCP, layout-shift and longtask entries, then export the timeline as JSON. Perfect for developers learning web performance measurement or debugging slow pages.

Frequently asked questions

Popular searches

performance apiperformance.now examplejavascript performance markperformance.measure exampleperformanceobserver tutorialweb performance apinavigation timing apiresource timing apiperformance entry typesuser timing apiperformance.mark explainedmeasure javascript execution timeperformance observer paintlargest contentful paint apilayout shift apilongtask apiperformance timelineweb vitals javascriptfrontend performance measurementjs benchmark tooljavascript timing functionsperformance.timeoriginhigh resolution timemonotonic clock javascriptperformance.getentriesbytypeclearmarks clearmeasurescustom performance metricsreal user monitoring basicsperformanceobserver bufferedpaint timing apifirst paint javascriptdomcontentloaded timingpage load timing apiresource load timesperformance api browser supportlearn performance apiweb performance labjavascript profiler browsermeasure function runtime jsperformance.now accuracyperformance api examplesperformanceobserver entry listnavigation timing explainedtransfer size performance apiperformance resource timingserver timing apiperformance api mdncore web vitals codemeasure api response time jsfrontend perf toolsperformance lab online

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →