Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Performance API gives you high-precision timing to measure how fast your code runs. Track page load times, function execution, and API response times with microsecond accuracy!
Microsecond accuracy timing
Navigation, resource timing
Mark & measure your code
performance.now() is more accurate (microseconds vs milliseconds) and monotonic (never goes backwards, even if system clock changes)!Measure function execution time with high precision
<div style="max-width: 700px; margin: 0 auto; font-family: 'Segoe UI', sans-serif;">
<div style="background: linear-gradient(135deg, #10b981 0%, #059669 50%, #14b8a6 100%); padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);">
<h2 style="color: white; margin: 0 0 12px 0; font-size: 28px; font-weight: 700; text-align: center;">⏱️ Performance Timer Demo</h2>
<p style="color: rgba(255, 255, 255, 0.9); margin: 0 0 30px 0; font-size: 15px; text-align: center;">Measure how fast operations execute</p>
<div style="background: rgba(255, 255, 255, 0.95); padding: 24px; border-radius: 12px; backdrop-filter: blur(10px);">
<div style="display: grid; gap: 12px; margin-bottom: 20px;">
<button id="quickBtn" style="padding: 14px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 15px;">
⚡ Quick Task (1ms)
</button>
<button id="mediumBtn" style="padding: 14px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 15px;">
🔶 Medium Task (100ms)
</button>
<button id="slowBtn" style="padding: 14px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 15px;">
🐢 Slow Task (500ms)
</button>
</div>
<div id="output" style="padding: 16px; background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border-radius: 8px; border-left: 4px solid #10b981; min-height: 100px;"></div>
<div id="history" style="margin-top: 16px; font-size: 12px; color: #6b7280;"></div>
</div>
</div>
</div>Loading preview...
// Start timer
const start = performance.now();
// Your code to measure
processLargeArray();
calculateComplexMath();
renderComponent();
// End timer
const end = performance.now();
const duration = end - start;
console.log(`Execution time: ${duration.toFixed(3)}ms`);
// Example output: "Execution time: 24.567ms"
// 👆 Notice the microsecond precision!
// Compare with Date.now() (less precise)
const dateStart = Date.now();
doSomething();
const dateEnd = Date.now();
console.log(`Date.now(): ${dateEnd - dateStart}ms`); // Only milliseconds// 1. Mark the start point
performance.mark('fetchData-start');
// 2. Do your work
const data = await fetch('/api/data');
const json = await data.json();
// 3. Mark the end point
performance.mark('fetchData-end');
// 4. Measure the duration between marks
performance.measure('fetchData', 'fetchData-start', 'fetchData-end');
// 5. Get the measurement
const measure = performance.getEntriesByName('fetchData')[0];
console.log(`Fetch took: ${measure.duration}ms`);
// 6. Clean up (optional)
performance.clearMarks('fetchData-start');
performance.clearMarks('fetchData-end');
performance.clearMeasures('fetchData');
// 🎯 Benefits:
// - Named timing points
// - Easy to track multiple operations
// - Built-in storage of measurements// Track multiple operations
performance.mark('app-init-start');
// Operation 1
performance.mark('auth-start');
await authenticateUser();
performance.mark('auth-end');
performance.measure('auth', 'auth-start', 'auth-end');
// Operation 2
performance.mark('data-start');
await loadUserData();
performance.mark('data-end');
performance.measure('data-load', 'data-start', 'data-end');
// Operation 3
performance.mark('render-start');
renderDashboard();
performance.mark('render-end');
performance.measure('render', 'render-start', 'render-end');
performance.mark('app-init-end');
performance.measure('total-init', 'app-init-start', 'app-init-end');
// Get all measurements
const measures = performance.getEntriesByType('measure');
measures.forEach(m => {
console.log(`${m.name}: ${m.duration.toFixed(2)}ms`);
});
// Output:
// auth: 234.56ms
// data-load: 456.78ms
// render: 123.45ms
// total-init: 814.79ms// Get navigation timing
const nav = performance.getEntriesByType('navigation')[0];
if (nav) {
console.log('📊 Page Load Metrics:');
// DNS lookup time
const dns = nav.domainLookupEnd - nav.domainLookupStart;
console.log(`DNS Lookup: ${dns}ms`);
// TCP connection time
const tcp = nav.connectEnd - nav.connectStart;
console.log(`TCP Connection: ${tcp}ms`);
// Request + Response time
const request = nav.responseEnd - nav.requestStart;
console.log(`Request/Response: ${request}ms`);
// DOM processing time
const domProcessing = nav.domComplete - nav.domInteractive;
console.log(`DOM Processing: ${domProcessing}ms`);
// DOM Content Loaded
const dcl = nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart;
console.log(`DOMContentLoaded: ${dcl}ms`);
// Total page load time
const loadTime = nav.loadEventEnd - nav.fetchStart;
console.log(`Total Load Time: ${loadTime}ms`);
// Time to Interactive (approximately)
const tti = nav.domInteractive - nav.fetchStart;
console.log(`Time to Interactive: ${tti}ms`);
}// Get all resource timings (images, scripts, stylesheets, etc.)
const resources = performance.getEntriesByType('resource');
// Find slow resources
const slowResources = resources
.filter(r => r.duration > 100)
.sort((a, b) => b.duration - a.duration);
console.log('🐢 Slowest Resources:');
slowResources.slice(0, 5).forEach((resource, i) => {
console.log(`${i + 1}. ${resource.name}`);
console.log(` Duration: ${resource.duration.toFixed(2)}ms`);
console.log(` Size: ${(resource.transferSize / 1024).toFixed(2)}KB`);
});
// Specific resource type
const images = resources.filter(r => r.initiatorType === 'img');
const totalImageTime = images.reduce((sum, img) => sum + img.duration, 0);
console.log(`Total image load time: ${totalImageTime.toFixed(2)}ms`);Find slow functions and optimize them
Track and report load time metrics
Measure API response times
Ensure operations stay within limits
High-precision, monotonic timer
Named timing points for tracking
Page load performance metrics
Track images, scripts, API calls