瀏覽器頁面處于不活躍狀態(tài)時setInterval不定時執(zhí)行
1.問題背景
頁面建立webSocket并設置定時甭≡玻活機制锅尘，切換到后臺或其他標簽頁一段時間后盖腿，定時器未按時調(diào)用，導致备辏活超時，ws closed
2.原因
當頁面變?yōu)榉腔顒訝顟B(tài)時逐纬，WebKit 會自動采取措施來節(jié)省電量：
-
requestAnimationFrame停止。 - CSS 和 SVG 動畫被暫停豁生。
- 計時器受到限制兔毒。
頁面變?yōu)榉腔顒訝顟B(tài)（不是用戶的主要焦點）的情況有多種，例如：
- 用戶切換到不同的選項卡甸箱。
- 用戶切換到不同的應用程序育叁。
- 瀏覽器窗口最小化。
- 瀏覽器窗口可見但不是焦點窗口芍殖。
- 瀏覽器窗口位于另一個窗口的后面豪嗽。
- 窗口所在的空間不是當前空間。
3.解決方案
使用 Web Workers￡侵瑁可以讓瀏覽器窗口在非激活狀態(tài)（或者最小化）也讓setTimeout树碱、setInterval有效不休眠的功能。
而且webWorkers還可以解決一個頁面存在多個定時器時候間隔時間誤差較大的問題变秦。
4.交互狀態(tài)
對于 Web 開發(fā)人員成榜，需要考慮三種交互狀態(tài)：
- 當用戶主動與內(nèi)容交互時。
- 當頁面位于最前面蹦玫，但用戶沒有與之交互時赎婚。
- 當頁面不是最前面的內(nèi)容時。
頁面可見性監(jiān)聽：
- 頁面可見性 API提供了一種方法來響應頁面轉(zhuǎn)換到后臺或前臺樱溉。這是避免在頁面處于后臺時更新 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
