不知道大家有沒有遇過這種狀況：你以為貓在安安靜靜地待著，結果你一轉頭看到他，他就突然朝你衝過來，打你一拳或拍你的腳。

(總是來得太突然，所以尚無範例gif供參考🐱)

其實瀏覽器也有類似的機制呢(雖然它不會打你一拳或拍你的腳)！在離開某個分頁時，瀏覽器會在背後悄悄降低該頁面的運作速度；直到你重新切回該分頁，它才會再次活躍起來。

筆記目錄

• 什麼是「背景節流（Background Throttle）」？
• 瀏覽器在你背後悄悄做了哪些事？
  • 1. 定時器降速（Timer Throttling）
  • 2. 畫面繪製直接暫停（requestAnimationFrame Stop）
  • 3. 記憶體凍結與休眠（Page Lifecycle API）
• 開發者該怎麼應對？
  • 解法一：Web Workers（不受背景限制的獨立小助手）
  • 解法二：Page Visibility API（切回分頁立刻校正）
• 總結
• 其他分享-Chrome 擴充套件

什麼是「背景節流（Background Throttle）」？

有些使用者在用瀏覽器時，常常一不小心就開了十幾個甚至幾十個分頁（就是我🙋🏻‍♀️）。如果每一個沒在看的分頁都在背景跑動畫、運算程式碼，電腦的 CPU 一定會立刻飆高，也很耗電

因此，各大瀏覽器（Chrome、Safari、Edge、Firefox 等）都內建了一套貼心的 節能機制：

核心觀念： 只要某個分頁不是你目前正在看的 「前景分頁（Active Tab）」 ，瀏覽器就會自動幫它「省電降速」，把系統資源留給你真正正在使用的網頁。

瀏覽器在你背後悄悄做了哪些事？

當切換到別的分頁，原本的分頁退到背景後，瀏覽器通常會默默啟動這三種限制措施：

1. 定時器降速（Timer Throttling）

在 JavaScript 中，很常使用 setInterval 或 setTimeout 來做自動重複的任務。

強制拉長間隔： 當分頁退到背景一段時間後，瀏覽器會把原本設定的執行間隔拉長（例如強制變成 1 秒甚至 60 秒才觸發一次）。

就算原本設定「每 0.01 秒執行一次」，到了背景也會被強制拖慢！

2. 畫面繪製直接暫停（requestAnimationFrame Stop）

網頁上那些順暢的動畫或特效，通常是用 window.requestAnimationFrame() 控制的。

一旦分頁被切到背景，這個方法就會 直接暫停運作（0 fps），畢竟既然使用者看不到畫面，也就完全沒必要浪費顯示卡去繪製。

3. 記憶體凍結與休眠（Page Lifecycle API）

如果電腦記憶體快不夠用了，而且某個背景分頁很久沒被點開，瀏覽器甚至會直接讓該頁面進入「休眠（Discarded）」狀態。

頁面會被暫時凍結，直到你重新點擊那個分頁，它才會再次重新載入。

開發者該怎麼應對？

解法一：Web Workers（不受背景限制的獨立小助手）

Web Worker 就像是在背景開闢了一個獨立的小工作區，它專門處理資料，不需要負責畫面上 DOM 的渲染。

因為 Worker 專注於背景數據處理，現代瀏覽器通常不會對 Web Worker 內部的定時器進行太嚴格的降速打壓：

// my-worker.js (獨立的背景檔)
let count = 0;

setInterval(() => {
  count++;
  postMessage(count); // 把計算結果傳回主畫面
}, 1000);

解法二：Page Visibility API（切回分頁立刻校正）

如果只是希望使用者切回分頁時，畫面上的狀態是精準的，最不耗資源的方法就是：「不要計算觸發了幾次，而是計算真實的時間差（Timestamp）」！

再搭配 Page Visibility API，在使用者切回分頁的那一瞬間重新對時：

let startTime = Date.now(); // 記錄開始時間

function updateStatus() {
  const now = Date.now();
  // 核心觀念：永遠用「現在時間 - 開始時間」來算過了多久，而不是靠觸發次數！
  const passedSeconds = Math.floor((now - startTime) / 1000);
  
  console.log(`實際上已經過了 ${passedSeconds} 秒`);
}

// 監聽頁面切換狀態
document.addEventListener('visibilitychange', () => {
  // 當使用者重新「切回」這個分頁時 (visible)
  if (document.visibilityState === 'visible') {
    // 立刻手動執行一次對時，畫面馬上就會變回最準確的狀態！
    updateStatus();
  }
});

就算背景被瀏覽器降速了，只要一切回前景，Date.now() 拿到的永遠是電腦當前最準確的真實時間，畫面瞬間就會自動校正過來。

總結

1. 不要相信背景分頁中的 setInterval 能像鬧鐘一樣精準。

2. 善用時間戳（Timestamp）：計算時間時，用「真實時間相減」絕對比「計算觸發次數」可靠得多。

3. 配合 Visibility API：在使用者切回分頁時補一下對時邏輯，就能兼顧網頁效能與使用者體驗。

其他分享-chrome 擴充套件

跟大家分享一個個人覺得很可愛的chrome 擴充套件，Cat Gatekeeper。

他會記錄你在特定網站（例如：youtube）的使用時間，當達到一定的時間會派出貓貓來霸佔你的螢幕。