這篇文章主要講解了JavaScript檢測空閑的瀏覽器選項卡的使用方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
按需網(wǎng)站開發(fā)可以根據(jù)自己的需求進行定制，網(wǎng)站設(shè)計、成都網(wǎng)站制作構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司網(wǎng)站設(shè)計、成都網(wǎng)站制作的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義
在某些情況下，當(dāng)用戶與我們的最終產(chǎn)品或應(yīng)用程序進行交互時，我們發(fā)現(xiàn)自己會執(zhí)行許多密集的，占用大量CPU的任務(wù)。啟動輪詢器，建立WebSocket連接，甚至加載視頻或圖片等媒體，都有可能成為性能障礙，尤其是當(dāng)這些任務(wù)在不需要的情況下消耗資源的時候。
在用戶沒有主動與界面交互的同時，從不必要的工作負載或網(wǎng)絡(luò)請求中釋放主線程是一個非常好的和有意義的實踐。換一種方式，在大多數(shù)主機提供商都在引入基于配額的定價模式的行業(yè)中，減少網(wǎng)絡(luò)請求也可以降低運行應(yīng)用程序或服務(wù)的成本。
頁面可見性(Page Visibility) API
所有現(xiàn)代的網(wǎng)頁瀏覽器都加入了頁面可見性API，它允許我們檢測瀏覽器的標(biāo)簽頁何時被隱藏，此外，我們還可以注冊一個事件監(jiān)聽器，以檢測可見性變化時的信號。
document.visibilityState
當(dāng)頁面處于前臺時，document.visibilityState 可能是 visible ，最小化窗口的“標(biāo)簽”或隱藏。
我們可以通過以下方式直接訪問 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以獲取更新，并且希望避免對空閑用戶進行不必要的調(diào)用。一個簡化的示例如下所示：
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);
在后臺異步加載
但有時我們可以通過反其道而行之，加速用戶的終端體驗。我們可以異步加載外部依賴或資產(chǎn)，而不是取消所有的作業(yè)和請求。這樣，當(dāng)用戶回來時，他們的最終體驗將更加“充實”并且豐富。
/ Webpack /
使用ES2015動態(tài)導(dǎo)入建議和適當(dāng)?shù)腤ebpack配置清單，我們可以輕松地在后臺加載額外的模塊或資產(chǎn)。
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還支持開箱即用的動態(tài)導(dǎo)入。
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預(yù)加載 /
除了使用捆綁器，我們還可以僅使用幾行JavaScript來預(yù)加載靜態(tài)資源(例如圖像)。
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);
微互動
最后，一種吸引用戶注意力的巧妙方法是動態(tài)更改圖標(biāo)，只需使用幾個像素就可以保持交互。
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);
看完上述內(nèi)容，是不是對JavaScript檢測空閑的瀏覽器選項卡的使用方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
