Performance API (performance.mark & measure)0%
Logging Architecture & Structured Log Levels

Performance API (performance.mark & measure)

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Performance API (performance.mark & measure)

While console.time() and Date.now() are useful for rudimentary logging, real enterprise performance instrumentation requires sub-millisecond precision and integration with browser performance profiling tools. The User Timing API (performance.mark() and performance.measure()) is the W3C standard for benchmarking code execution.

1. High-Resolution Time: performance.now()

Date.now() returns time in whole milliseconds and is subject to system clock adjustments (NTP syncs).

In contrast, performance.now() returns a floating-point number representing milliseconds with microsecond resolution (accurate to thousandths of a millisecond), measured monotonically from page creation:

JavaScript
const t0 = performance.now();
executeComputation();
const t1 = performance.now();
 
console.log(`Execution took ${(t1 - t0).toFixed(3)} ms`);
// "Execution took 14.821 ms"

2. Using performance.mark() and performance.measure()

The User Timing API stores timestamped markers in the browser's high-speed Performance Timeline buffer:

JavaScript
async function loadUserData(userId) {
// Step 1: Create starting timestamp marker
performance.mark('fetchUser:start');
 
const res = await fetch(`/api/users/${userId}`);
const data = await res.json();
 
// Step 2: Create ending timestamp marker
performance.mark('fetchUser:end');
 
// Step 3: Measure the duration between the two marks
const measure = performance.measure(
'UserFetchDuration', // Measure Name
'fetchUser:start', // Start Mark
'fetchUser:end' // End Mark
);
 
console.log(`User ${userId} fetched in ${measure.duration.toFixed(2)}ms`);
}
Output
Performance Timeline:
[fetchUser:start] ════════════════════════► [fetchUser:end]
▲
│ performance.measure('UserFetchDuration')
▼
DevTools "Timings" Track displays visual measurement bar!

3. Visualizing in DevTools Performance Panel

When you run a profile in the DevTools Performance panel, any performance.mark() and performance.measure() entries appear automatically in the Timings flame-chart lane, providing visual context alongside network requests and layout frames!

4. Collecting Measures with PerformanceObserver

Rather than polling, use a PerformanceObserver to stream performance measurements asynchronously to analytics servers:

JavaScript
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`[Telemetry Metric] ${entry.name}: ${entry.duration.toFixed(2)}ms`);
// Send to DataDog / New Relic / Google Analytics:
sendAnalyticsMetric({
metricName: entry.name,
durationMs: entry.duration,
startTime: entry.startTime
});
}
});
 
// Register observer for custom user timing measures
observer.observe({ entryTypes: ['measure'] });

5. Cleaning Up Performance Markers

Clear the internal browser buffer to prevent memory buildup:

JavaScript
// Clear specific marks and measures
performance.clearMarks('fetchUser:start');
performance.clearMeasures('UserFetchDuration');
 
// Or wipe all custom user timings:
// performance.clearMarks();
// performance.clearMeasures();
Interactive Quiz

Practice Quiz

Question 1
How does performance.now() differ from Date.now()?
Question 2
What method creates a named timestamp checkpoint in the browser's performance timeline?
Question 3
How do you calculate and record the duration between two performance marks?
Question 4
Where do custom User Timing marks and measures appear in Chrome DevTools?
Question 5
What API allows real-time asynchronous streaming of performance metric entries to telemetry collectors?
Next Lesson

Logging Architecture & Structured Log Levels

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Web Audio & MediaStream APIs BasicsLogging Architecture & Structured Log Levels

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext