瀏覽器頁面處于不活躍狀態(tài)時setInterval不定時執(zhí)行

1.問題背景

頁面建立webSocket并設置定時?；顧C制，切換到后臺或其他標簽頁一段時間后，定時器未按時調用，導致?；畛瑫r，ws closed

2.原因

當頁面變?yōu)榉腔顒訝顟B(tài)時，WebKit 會自動采取措施來節(jié)省電量：

• requestAnimationFrame停止。
• CSS 和 SVG 動畫被暫停。
• 計時器受到限制。

頁面變?yōu)榉腔顒訝顟B(tài)（不是用戶的主要焦點）的情況有多種，例如：

• 用戶切換到不同的選項卡。
• 用戶切換到不同的應用程序。
• 瀏覽器窗口最小化。
• 瀏覽器窗口可見但不是焦點窗口。
• 瀏覽器窗口位于另一個窗口的后面。
• 窗口所在的空間不是當前空間。

3.解決方案

使用 Web Workers?？梢宰尀g覽器窗口在非激活狀態(tài)（或者最小化）也讓setTimeout、setInterval有效不休眠的功能。

而且webWorkers還可以解決一個頁面存在多個定時器時候間隔時間誤差較大的問題。

4.交互狀態(tài)

對于 Web 開發(fā)人員，需要考慮三種交互狀態(tài)：

• 當用戶主動與內(nèi)容交互時。
• 當頁面位于最前面，但用戶沒有與之交互時。
• 當頁面不是最前面的內(nèi)容時。

頁面可見性監(jiān)聽：

• 頁面可見性 API提供了一種方法來響應頁面轉換到后臺或前臺。這是避免在頁面處于后臺時更新 UI
• blur只要頁面不再聚焦，就會發(fā)送事件。在這種情況下，頁面可能仍然可見，但它不是當前聚焦的窗口。

5.參考：

• （1）How Web Content Can Affect Power Usage https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/#:~:text=Timers%20are%20throttled

• （2）當瀏覽器切換到其他標簽頁或者最小化時，你的js定時器還準時嗎？https://juejin.cn/post/6899796711401586695