Performance APIs — Complete Guide
Performance APIs — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 70 of 100
Performance APIs
Basics ✓ → Objects & data ✓ → Async & DOM ✓ → Advanced → Tools → Projects
Advanced · 4 — Production skills · ~10 min · JS Advanced
What is this?
Performance API measures timing — how long scripts run, when resources load, and Core Web Vitals.
Why should you care?
You cannot fix slow pages without measuring first.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
performance.mark("start");
for (let i = 0; i < 1e6; i++) {}
performance.mark("end");
performance.measure("loop", "start", "end");
console.log(performance.getEntriesByName("loop")[0].duration);Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- mark/measure bracket code.
- duration is in milliseconds.
- Also see performance.now().
Practice next
- mark start/end around a loop and measure.
- Log duration from getEntriesByName.
- Run Lighthouse audit.
- Compare two sort algorithms with performance.now timings.
- Use PerformanceObserver to log long tasks over 50ms.
Remember
mark / measure / now Lighthouse for audits Measure before tuning
ScriptVerse SLA dashboard
CI runs Lighthouse on each deploy and fails build if LCP regresses beyond 2.5s budget.
Outcome: Performance APIs turn subjective "feels slow" into actionable metrics.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
