00:00:00.0
Stopwatch and Timer is a browser-based time tracking tool with millisecond precision. Use the stopwatch to measure elapsed time with lap recording, or set a countdown timer that alerts you when time expires. Both modes work in the background — you can switch browser tabs and the timer continues running. Time data persists through page refreshes using localStorage.
Precision timing in the browser uses the Performance API (performance.now()), which provides sub-millisecond precision based on the monotonic clock — unlike Date.now() which can jump backward (NTP adjustments) or forward (clock changes). For stopwatch applications: record the start timestamp, and on each display update, calculate elapsed = performance.now() - startTime. This approach is accurate even when the JavaScript event loop is busy.
Common use cases: timing coding sessions and deep work intervals (Pomodoro technique), measuring task completion times for time tracking, countdown timers for presentations and meetings, lap timing for exercise and sports, and testing performance of real-world tasks without code instrumentation.
Pomodoro session
Result: Set timer to 25:00 → work until alert → lap to record → set 5:00 break timer
Lap times
Result: Stopwatch: Lap1: 1:23.45, Lap2: 1:19.87, Lap3: 1:25.12 — last lap slowest
Meeting countdown
Result: Set timer to 30:00 → share screen → visual indicator shows time remaining in meeting
Why does setTimeout drift and how do browsers handle timer accuracy?
setTimeout and setInterval are not guaranteed to fire exactly on time — the browser's event loop, garbage collection pauses, and tab throttling (background tabs get timers throttled to 1 Hz by Chrome and Firefox) cause drift. For accurate timing: record the start time with performance.now() and calculate elapsed on each frame with requestAnimationFrame — don't try to track time by counting timer callbacks. Visible tabs get requestAnimationFrame at 60fps; background tabs get 1fps or less.
What is the Pomodoro Technique?
The Pomodoro Technique (Francesco Cirillo, 1980s) is a time management method: (1) Choose a task to work on. (2) Set a timer to 25 minutes. (3) Work on the task until the timer rings. (4) Take a 5-minute break. (5) Every 4 pomodoros, take a longer break (15-30 minutes). The 25-minute intervals help maintain focus and prevent fatigue. Named after a tomato-shaped kitchen timer (pomodoro = Italian for tomato). Many productivity apps implement this pattern.
How does browser tab throttling affect timers?
Major browsers throttle JavaScript timers in background tabs to save power and CPU. Chrome (since 2021): background tabs get timers throttled to minimum 1 Hz (1 second between executions, even if you set 100ms). Firefox: similar throttling for hidden tabs. Safari: aggressive throttling and suspension. Impact: countdown timers lose precision in background tabs. Workaround: use the Page Visibility API (document.addEventListener('visibilitychange')) to record the time when hidden and compensate when the tab becomes visible again.
What is the difference between a stopwatch and a timer?
A stopwatch counts up from zero, measuring elapsed time. Used to measure how long something takes. A timer (countdown) counts down from a set time to zero, alerting when time expires. Used to limit or schedule time. In a Pomodoro workflow: use a countdown timer to mark the end of a work session (25 minutes), and a stopwatch to measure total productive time across sessions.
Can I use the browser's notification API for timer alerts?
Yes — use the Notifications API to show browser notifications even when the tab is in the background. First request permission: await Notification.requestPermission(). Then: new Notification('Timer Done!', {body:'Your 25-minute session is complete', icon:'/icon.png'}). This works even when the browser is minimized (on some OS/browser combinations). Fallback: play an audio alert via the Web Audio API — this works in any tab that the user has interacted with.