溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JavaScript檢測空閑的瀏覽器選項卡的使用方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
在某些情況下，當用戶與我們的最終產品或應用程序進行交互時，我們發現自己會執行許多密集的，占用大量CPU的任務。啟動輪詢器，建立WebSocket連接，甚至加載視頻或圖片等媒體，都有可能成為性能障礙，尤其是當這些任務在不需要的情況下消耗資源的時候。
在用戶沒有主動與界面交互的同時，從不必要的工作負載或網絡請求中釋放主線程是一個非常好的和有意義的實踐。換一種方式，在大多數主機提供商都在引入基于配額的定價模式的行業中，減少網絡請求也可以降低運行應用程序或服務的成本。
頁面可見性(Page Visibility) API
所有現代的網頁瀏覽器都加入了頁面可見性API，它允許我們檢測瀏覽器的標簽頁何時被隱藏，此外，我們還可以注冊一個事件監聽器，以檢測可見性變化時的信號。
document.visibilityState
當頁面處于前臺時，document.visibilityState 可能是 visible ，最小化窗口的“標簽”或隱藏。
我們可以通過以下方式直接訪問 document.visibilityState：
console.log(document.visibilityState); // => 它可以是“visible”或“hidden”
visibilitychange Event
我們還可以使用事件偵聽器輕松檢測可見性屬性中的更改。
const onVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
console.log('> 這個窗口是隱藏的.');
} else {
console.log('> 這個窗口是可見的.');
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false); 輪詢示例
考慮一種情況，在這種情況下，我們正在輪詢API以獲取更新，并且希望避免對空閑用戶進行不必要的調用。一個簡化的示例如下所示：
const poll = () => {
const interval = 1500;
let _poller = null;
const repeat = () => {
console.log(`~ Polling: ${Date.now()}.`);
};
return {
start: () => {
_poller = setInterval(repeat, interval);
},
stop: () => {
console.log('~ Poller stopped.');
clearInterval(_poller);
}
};
};
const poller = poll();
poller.start();
const onVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
poller.stop();
} else {
poller.start();
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false); 在后臺異步加載
但有時我們可以通過反其道而行之，加速用戶的終端體驗。我們可以異步加載外部依賴或資產，而不是取消所有的作業和請求。這樣，當用戶回來時，他們的最終體驗將更加“充實”并且豐富。
/ Webpack /
使用ES2015動態導入建議和適當的Webpack配置清單，我們可以輕松地在后臺加載額外的模塊或資產。
let loaded = false;
const onVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
// Aggresively preload external assets ans scripts
if (loaded) {
return;
}
Promise.all([
import('./async.js'),
import('./another-async.js'),
import(/* webpackChunkName: "bar-module" */ 'modules/bar'),
import(/* webpackPrefetch: 0 */ 'assets/images/foo.jpg')
]).then(() => {
loaded = true;
});
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false);/ Rollup /
Rollup還支持開箱即用的動態導入。
let loaded = false;
const onVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
// Aggresively preload external assets ans scripts
if (loaded) {
return;
}
Promise.all([
import('./modules.js').then(({default: DefaultExport, NamedExport}) => {
// do something with modules.
})
]).then(() => {
loaded = true;
});
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false); / 用Javascript預加載 /
除了使用捆綁器，我們還可以僅使用幾行JavaScript來預加載靜態資源(例如圖像)。
let loaded = false;
const preloadImgs = (...imgs) => {
const images = [];
imgs.map(
url =>
new Promise((resolve, reject) => {
images[i] = new Image();
images[i].src = url;
img.onload = () => resolve();
img.onerror = () => reject();
})
);
};
const onVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
// Aggresively preload external assets ans scripts
if (loaded) {
return;
}
Promise.all(
preloadImgs(
'https://example.com/foo.jpg',
'https://example.com/qux.jpg',
'https://example.com/bar.jpg'
)
)
.then(() => {
loaded = true;
})
.catch(() => {
console.log('> Snap.');
});
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false); 微互動
最后，一種吸引用戶注意力的巧妙方法是動態更改圖標，只需使用幾個像素就可以保持交互。
const onVisibilityChange = () => {
const favicon = document.querySelector('[rel="shortcut icon"]');
if (document.visibilityState === 'hidden') {
favicon.href = '/come-back.png';
} else {
favicon.href = '/example.png';
}
};
document.addEventListener('visibilitychange', onVisibilityChange, false); 看完上述內容，是不是對JavaScript檢測空閑的瀏覽器選項卡的使用方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
