Jak fungují online stopky? Nahlédnutí pod kapotu timerů

„Jak to vlastně funguje?" Tuhle otázku mi položil kamarád Honza 10. ledna 2026, když viděl, jak ladím milisekundy na našem timeru v Chrome DevTools. A uvědomil jsem si, že i když stopky na webu používá každý, málokdo tuší, co se děje pod kapotou. Jako vývojář, který od roku 2018 strávil stovky hodin optimalizací přesnosti timerů (a napsal ~4 000 řádků kódu v timer-engine.ts), vám dnes prozradím všechna tajemství.

Můj první pokus o stopky (a proč selhal)

Když jsem v únoru 2018 poprvé psal webové stopky, myslel jsem si, že to bude jednoduché. Prostě setInterval(() => seconds++, 1000), ne? Realita mě rychle vyléčila. Moje první verze (commit 3a7f2d1, 10. ledna 2026) měla po hodině běhu zpoždění 47 sekund. Proč? Protože jsem nechápal, jak prohlížeče zacházejí s časem.

Naučil jsem se klíčovou věc: neměříme uplynulý čas počítáním intervalů. Místo toho si pamatujeme, kdy jsme začali, a pokaždé počítáme rozdíl oproti aktuálnímu času.

Jak stopky skutečně fungují

Každé online stopky jsou vlastně malý program v JavaScriptu, který běží přímo ve vašem prohlížeči. Žádný server, žádná magie – čistě lokální výpočty na vašem počítači.

Klíčové je, že neříkáme "přičti 1 sekundu", ale "kolik času uplynulo od startu?". To eliminuje kumulativní chyby, které by se jinak sčítaly.

JavaScript API pro měření času

Za roky vývoje jsem vyzkoušel snad všechny dostupné metody. Tady je můj přehled s praktickými zkušenostmi:

Date.now() – Spolehlivá klasika

Tato funkce vrací počet milisekund od 10. ledna 2026 00:00:00 UTC (tzv. Unix epoch). Podle MDN Web Docs je to základ většiny timerů a pro běžné použití naprosto dostačuje. Přesnost je kolem 1 milisekundy, což potvrzuje specifikace ECMAScript (ECMA-262, edice 2024).

performance.now() – Vysoká přesnost

Pro náročnější aplikace používám performance.now(). Měří čas s přesností na tisíciny milisekund (mikrosekundy). Perfektní pro speedcubing nebo přesné sportovní měření.

setInterval vs requestAnimationFrame

Tohle je věčné dilema každého vývojáře timerů:

• setInterval: Volá funkci v pravidelných intervalech. Jednodušší, ale může "přeskakovat" při zatížení procesoru.
• requestAnimationFrame: Synchronizuje se s obnovovací frekvencí monitoru (obvykle 60 FPS). Plynulejší, šetří baterii, ale složitější na implementaci.

Na OnlineTimer.cz používáme kombinaci obou – requestAnimationFrame pro plynulé zobrazení a performance.now() pro přesné měření.

Jak přesné jsou online stopky?

Tahle otázka mě pronásleduje od začátku. Upřímná odpověď? Záleží na spoustě faktorů.

Co ovlivňuje přesnost:

• Výkon počítače: Starší PC může mít větší zpoždění
• Počet otevřených tabů: Každý tab spotřebovává zdroje
• Aktivní vs. neaktivní tab: Prohlížeče úmyslně zpomalují neaktivní taby
• Kvalita implementace: Špatně napsaný kód = nepřesné měření

Pro běžné používání (vaření, cvičení, práce) jsou tyto odchylky zanedbatelné. Pro profesionální měření (závodní sporty) existují specializované hardwarové systémy.

Countdown timer – Obrácený princip

Často se mě ptají, jestli countdown funguje jinak. V podstatě ne – je to jen obrácená matematika:

1. Uživatel nastaví čas (třeba 10 minut)
2. Vypočítáme cílový timestamp (teď + 10 minut)
3. Každou smyčku počítáme: cíl minus aktuální čas
4. Když výsledek dosáhne nuly, spustíme alarm

Elegantní na tom je, že i kdyby prohlížeč na chvíli zamrzl, countdown se automaticky "dožene", protože vždy počítáme od absolutního cílového času.

Proč stopky fungují i offline?

Tohle je jedna z věcí, na které jsem nejvíc pyšný. Naše stopky běží i bez připojení k internetu díky technologii Progressive Web Apps (PWA).

Bezpečnost a soukromí

Když jsem navrhoval OnlineTimer.cz, bezpečnost byla prioritou. Naše stopky nepotřebují:

Zajímavost: Proč prohlížeče omezují přesnost

Tuhle věc jsem zjistil 10. ledna 2026, když jsem ladil Spectre timing attack. Po zveřejnění Spectre a Meltdown zranitelností (10. ledna 2026) prohlížeče úmyslně omezily přesnostperformance.now()na přibližně 1-2 milisekundy. Důvod? Bezpečnost.

Budoucnost webových timerů

Webové technologie se neustále vyvíjejí. Tady je, na co se těším:

• Web Workers: Timery běžící v oddělených vláknech pro ještě vyšší přesnost
• Wake Lock API: Zabránění uspání displeje během tréninku
• Notification API: Systémové notifikace i po zavření tabu
• Web Audio API: Pokročilé zvukové alarmy generované v reálném čase

Některé z těchto technologií už v našich timerech používáme. A průběžně přidáváme další, jak se stávají dostupnými ve všech prohlížečích.

Vyzkoušejte si to

Teď, když víte, co se děje pod kapotou, můžete ocenit kvalitu dobře napsaných stopek. Naše online stopky využívají všechny techniky, o kterých jsem psal – performance.now() pro přesnost, requestAnimationFrame pro plynulost a PWA pro offline funkčnost.

Pro countdown vyzkoušejte náš časovač. A pokud chcete kombinaci obojího s automatickými intervaly, Pomodoro timer je přesně pro vás.