What is the browser performance API and how do you measure performance?
Answer
The Performance API provides programmatic access to browser timing data. Key interfaces: performance.now(): high-resolution timestamp in milliseconds — more precise than Date.now(). Use for measuring code execution time: const start = performance.now(); doWork(); console.log(performance.now() - start). performance.mark() and performance.measure(): user timing API for marking specific points and measuring between them. Visible in DevTools. PerformanceObserver: observe performance entries as they occur: const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(entry.name, entry.startTime, entry.duration) } }); observer.observe({ entryTypes: ["largest-contentful-paint", "layout-shift", "longtask"] });. web-vitals library (Google): easiest way to collect Core Web Vitals: import { onLCP, onINP, onCLS, onFCP, onTTFB } from "web-vitals";. Long Task API: entryTypes: ["longtask"] — any main-thread task >50ms. Navigation Timing API: performance.getEntriesByType("navigation")[0] — complete page load timing breakdown.
Previous
How do you optimize React applications for performance?
Next
What is layout thrashing and how do you avoid it?
More Web Performance Questions
View all →- Intermediate How do you optimize React applications for performance?
- Intermediate What is layout thrashing and how do you avoid it?
- Intermediate What is resource prioritization in browsers?
- Intermediate How does SSR (Server-Side Rendering) improve performance?
- Intermediate What is a performance budget?