你有沒有想過，為什么手機(jī)自帶的秒表用了十年都沒出過問題，而網(wǎng)頁里的計(jì)時(shí)器動(dòng)不動(dòng)就"偷時(shí)間"？

一位前端工程師最近栽了個(gè)跟頭。他以為10分鐘能搞定的瀏覽器秒表，硬是寫了兩天。問題不在代碼量，而在瀏覽器里藏著一個(gè)你從未察覺的"摸魚機(jī)制"——當(dāng)你切到別的標(biāo)簽頁，它真的會(huì)偷懶。

10毫秒的承諾，14毫克的現(xiàn)實(shí)

最直覺的寫法長這樣：每隔10毫秒加10，看起來精準(zhǔn)得像瑞士鐘表。但瀏覽器會(huì)告訴你：圖樣圖森破。

setInterval（定時(shí)器）保證的是"最少等10毫秒"，不是"正好10毫秒"。事件 loop 忙不忙、CPU 有沒有在渲染別的頁面、垃圾回收是不是正在掃內(nèi)存——這些都會(huì)讓實(shí)際間隔變成14到20毫秒。跑滿60秒，誤差能攢出好幾秒。用戶看著表顯示1分鐘，實(shí)際已經(jīng)過了1分03秒。

這種漂移不是bug，是設(shè)計(jì)如此。JavaScript 是單線程的，它沒法像硬件中斷那樣強(qiáng)行插隊(duì)。

工程師的第一次覺醒：別數(shù)心跳，看墻上的鐘。

換成 performance.now()（高精度時(shí)間戳）記錄開始時(shí)刻，每次刷新時(shí)現(xiàn)算 elapsed = 現(xiàn)在 - 開始。這個(gè)時(shí)間戳跟系統(tǒng)時(shí)鐘無關(guān)，調(diào)時(shí)區(qū)、改時(shí)間都不會(huì)讓它跳表。Date.now() 雖然也能用，但精度只有毫秒，而且系統(tǒng)時(shí)間一變它就跟著變——想象一下秒表突然從30秒跳到2小時(shí)。

顯示刷新也換了 requestAnimationFrame（請求動(dòng)畫幀），跟屏幕刷新率綁定，通常是60Hz。既夠肉眼看了，又不用瘋狂操作 DOM。

切個(gè)標(biāo)簽頁，時(shí)間憑空消失

但真正的坑在下一步。瀏覽器有個(gè)"節(jié)能正義"：標(biāo)簽頁切到后臺(tái)，定時(shí)器會(huì)被瘋狂節(jié)流，setInterval 可能1秒才響一次；requestAnimationFrame 更徹底，直接暫停。

對用戶來說這是什么體驗(yàn)？開始計(jì)時(shí)，切去回個(gè)微信，回來一看——秒表還在走，但比真實(shí)時(shí)間慢了一截。不是卡了，是瀏覽器覺得"反正你看不見，我歇會(huì)兒"。

這個(gè)設(shè)計(jì)本意是好的。后臺(tái)標(biāo)簽頁如果還跟前臺(tái)一樣勤快，筆記本電池?fù)尾贿^兩小時(shí)。但對秒表這種需要墻鐘精度的場景，它就是災(zāi)難。

工程師的第二次覺醒：得讓頁面"睡醒"時(shí)自己補(bǔ)課。

visibilitychange（可見性變化）事件派上用場。標(biāo)簽頁重新可見時(shí)，立刻用那個(gè)從未變過的 startTime 重新計(jì)算 elapsed，顯示瞬間追上。用戶看到的不是"從卡住的地方繼續(xù)"，而是"時(shí)間原來已經(jīng)走了這么遠(yuǎn)"。

圈速功能：簡單需求，隱藏復(fù)雜度

基礎(chǔ)計(jì)時(shí)搞定后，工程師加了圈速（lap）功能——每按一下記錄當(dāng)前時(shí)刻，同時(shí)顯示這一圈比上一圈快多少。

實(shí)現(xiàn)本身不復(fù)雜：數(shù)組存歷史記錄，當(dāng)前減上一個(gè)就是分段用時(shí)。但 UX 設(shè)計(jì)暴露了新問題：用戶要同時(shí)看到總時(shí)間和分段差值，而且分段可能是負(fù)數(shù)（這一圈比上一圈慢）。

這里沒用什么高深算法，就是狀態(tài)管理。但工程師意識(shí)到，一個(gè)"能用"的秒表和"好用"的秒表，差距往往在這些細(xì)節(jié)。

整個(gè)項(xiàng)目最后交付時(shí)，代碼量其實(shí)不大。兩天時(shí)間主要花在理解瀏覽器的行為邊界，以及測試各種邊緣場景——低電量模式、后臺(tái)標(biāo)簽、系統(tǒng)休眠恢復(fù)。

瀏覽器不是操作系統(tǒng)，它是個(gè)在操作系統(tǒng)之上、還要討好電池和用戶體驗(yàn)的中間層。你想讓它像硬件一樣可靠，就得知道它在哪些地方會(huì)選擇性不可靠。

這位工程師把經(jīng)歷寫成了博客，評(píng)論區(qū)最高贊是："所以我用了十年手機(jī)自帶秒表，從沒想過網(wǎng)頁版為什么這么少。"另一條回復(fù)更扎心："Chrome 團(tuán)隊(duì)看到這篇文章，默默把后臺(tái)節(jié)流從1秒改成了2秒。"