當標籤沒有焦點時，什麼處理/渲染*不*瀏覽器？

Question

我有一個顯示實時統計信息的頁面。它運行大量的JavaScript，製作大量的HTTP請求，每隔幾秒使用D3.js呈現SVG圖表，有很多CSS動畫，並經常重新排列DOM。

只要頁面聚焦，它運行平穩。如果我切換到另一個選項卡並稍後再回來，那麼在視圖突然出現並且該頁面再次變爲可用狀態之前，通常會暫停頁面似乎被凍結的時間。標籤背景越長，停頓時間越長。如果該選項卡已經在很長時間（幾小時）後臺，並且我切換回它，它會很長時間被凍結然後崩潰。

所有這些行爲都在Chrome中觀察到。我沒有在其他瀏覽器中測試過很多。

當我第一次切換回選項卡時，Chrome在暫停期間正在做什麼？

Answer 1

你正在運行一個setInterval或一系列setTimeout秒。
每個人都排隊等待在功能中指定的點之後運行。

Google會將您網頁上的所有內容都節流下來，每秒更新幾次... ...所以如果您的計時器設置爲在30fps或其他任何位置移動設備並進行動畫製作，那麼您已經讓Google觸發一輪更新（無論您有什麼計劃），這無疑會調用請求的東西另一個更新，這將要求一個又一個的...

...當你切換回來，你有數百個（或幾萬）這些更新等待發生，現在，而不是在30fps發生，你有一堆這些東西在等待......他們都已通過他們的「不跑，直到......」時間，他們都會嘗試儘可能快地進行更新，直到您被捕捉到計時器再次通電的位置。

如果瀏覽器支持在頁面可見性API的組件，然後暫停您的來電時，頁面是不可見的。

if (!document.hidden) { doStuff(); } 

OR

document.addEventListener("visibilitychange", function (evt) { 
    if (evt.visibilityState === "hidden") { myApp.pause(); } 
    else if (evt.visibilityState === "visible") { myApp.resume(); } 
}); 

如果它不支持的API，那麼你可以嘗試填充工具它，使用window.onblur，或以其他方式。
也就是說，如果瀏覽器不支持頁面可見性API，它也不會對頁面代碼進行硬核限制。
這不是100％的保證，而是半可能性。