在現(xiàn)代 Web 開(kāi)發(fā)中，我們常常需要知道用戶是否還停留在當(dāng)前頁(yè)面。這個(gè)看似簡(jiǎn)單的需求，背后卻關(guān)聯(lián)著用戶體驗(yàn)、數(shù)據(jù)分析和系統(tǒng)性能等多個(gè)重要方面。
“離開(kāi)頁(yè)面”這個(gè)行為本身可以被細(xì)分為多種場(chǎng)景：
- 切換到其他瀏覽器標(biāo)簽頁(yè)或應(yīng)用（頁(yè)面變?yōu)椴豢梢?jiàn)，但未關(guān)閉）。
- 最小化瀏覽器窗口（同上）。
- 關(guān)閉瀏覽器標(biāo)簽頁(yè)或整個(gè)瀏覽器。
- 在當(dāng)前標(biāo)簽頁(yè)中導(dǎo)航到新的 URL。
- 在移動(dòng)設(shè)備上切換到其他 App 或返回主屏幕。
針對(duì)這些不同的場(chǎng)景，前端提供了多種不同的技術(shù)和 API 來(lái)進(jìn)行判斷。
方法一：Page Visibility API (頁(yè)面可見(jiàn)性 API) - 現(xiàn)代首選
這是處理“頁(yè)面是否對(duì)用戶可見(jiàn)”這一問(wèn)題的標(biāo)準(zhǔn)方法。它專門用于檢測(cè)頁(yè)面是否被隱藏或顯示，非常適合處理用戶切換標(biāo)簽頁(yè)、最小化窗口等場(chǎng)景。
核心概念：
document.hidden：一個(gè)只讀屬性，如果頁(yè)面處于后臺(tái)或最小化狀態(tài)，則返回 true，否則返回 false。visibilitychange 事件：當(dāng)頁(yè)面的可見(jiàn)性狀態(tài)發(fā)生變化時(shí)（即 document.hidden 的值改變時(shí)），該事件會(huì)在 document 對(duì)象上觸發(fā)。
適用場(chǎng)景：
- 暫停/播放視頻或音頻。
- 停止/啟動(dòng)動(dòng)畫(huà)或輪播圖。
- 暫停輪詢服務(wù)器請(qǐng)求，在頁(yè)面恢復(fù)可見(jiàn)時(shí)再繼續(xù)。
代碼示例：
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 頁(yè)面變得不可見(jiàn)
console.log('用戶離開(kāi)了當(dāng)前頁(yè)面（切換標(biāo)簽頁(yè)或最小化）');
// 在這里暫停視頻、動(dòng)畫(huà)等
pauseMyVideo();
} else {
// 頁(yè)面恢復(fù)可見(jiàn)
console.log('用戶回到了當(dāng)前頁(yè)面');
// 在這里恢復(fù)播放
playMyVideo();
}
});
優(yōu)點(diǎn)：
- 標(biāo)準(zhǔn)、可靠：W3C 標(biāo)準(zhǔn)，所有現(xiàn)代瀏覽器都支持。
- 性能友好：專門為此設(shè)計(jì)，能有效節(jié)省 CPU 和電池資源。
- 邏輯清晰：直接反映頁(yè)面的“可見(jiàn)”狀態(tài)。
缺點(diǎn)：
- 它無(wú)法判斷用戶是否正在關(guān)閉頁(yè)面。當(dāng)用戶關(guān)閉標(biāo)簽頁(yè)時(shí)，
visibilitychange 事件可能會(huì)觸發(fā)（變?yōu)?hidden），但我們無(wú)法區(qū)分這是切換還是關(guān)閉。
方法二：beforeunload 和 unload 事件 - 傳統(tǒng)告別方式
這兩個(gè)事件是在用戶即將真正離開(kāi)頁(yè)面（關(guān)閉、刷新、導(dǎo)航到其他鏈接）時(shí)觸發(fā)的。
1. beforeunload 事件
該事件在窗口、文檔及其資源即將被卸載時(shí)觸發(fā)。它可以用來(lái)詢問(wèn)用戶是否確定要離開(kāi)。
核心用途：
- 防止用戶意外丟失未保存的數(shù)據(jù)。瀏覽器通常會(huì)彈出一個(gè)確認(rèn)對(duì)話框。
代碼示例：
注意：出于安全考慮，現(xiàn)代瀏覽器不允許開(kāi)發(fā)者自定義提示框中的文本內(nèi)容，只會(huì)顯示瀏覽器內(nèi)置的標(biāo)準(zhǔn)化提示。
2. unload 事件
該事件在頁(yè)面已經(jīng)開(kāi)始卸載之后觸發(fā)。這是我們?cè)谟脩綦x開(kāi)時(shí)執(zhí)行最后清理操作的傳統(tǒng)位置。
代碼示例：
window.addEventListener('unload', () => {
console.log('用戶正在關(guān)閉或離開(kāi)頁(yè)面');
// 警告：在這里執(zhí)行的操作可能不會(huì)完成！
// sendAnalyticsData();
});
重大缺陷：
unload 事件非常不可靠。瀏覽器在處理頁(yè)面卸載時(shí)，并不會(huì)等待 unload 事件處理器中的異步操作（如 fetch 或 XMLHttpRequest）完成。這意味著，如果我們想在這里發(fā)送一個(gè)分析數(shù)據(jù)到服務(wù)器，這個(gè)請(qǐng)求很可能在發(fā)送完成之前就被瀏覽器終止了。
方法三：navigator.sendBeacon() - 可靠的數(shù)據(jù)上報(bào)利器
為了解決 unload 事件中異步請(qǐng)求不可靠的問(wèn)題，W3C 推出了 navigator.sendBeacon() API。
核心概念：
sendBeacon() 方法可以異步地向服務(wù)器發(fā)送少量數(shù)據(jù)，并且瀏覽器保證會(huì)將其啟動(dòng)并排隊(duì)發(fā)送，而不會(huì)阻塞或延遲頁(yè)面的卸載過(guò)程。即使頁(yè)面已經(jīng)關(guān)閉，數(shù)據(jù)發(fā)送也會(huì)在后臺(tái)繼續(xù)進(jìn)行。
適用場(chǎng)景：
- 在用戶離開(kāi)頁(yè)面時(shí)，可靠地發(fā)送日志、分析或統(tǒng)計(jì)數(shù)據(jù)。
如何使用（通常與 unload 或 pagehide 結(jié)合）：
這種方式是目前在頁(yè)面卸載時(shí)發(fā)送數(shù)據(jù)的最佳實(shí)踐。
方法四：pagehide 和 pageshow 事件 - 應(yīng)對(duì)往返緩存（bfcache）
現(xiàn)代瀏覽器（尤其是移動(dòng)端）引入了“往返緩存”（Back-Forward Cache, bfcache）。當(dāng)用戶導(dǎo)航到其他頁(yè)面后，如果點(diǎn)擊“后退”按鈕，瀏覽器可能會(huì)直接從緩存中恢復(fù)上一個(gè)頁(yè)面，而不是重新加載它。在這種情況下，unload 事件可能根本不會(huì)觸發(fā)。
pagehide 事件則可以更好地處理這種情況。
核心概念：
pagehide 事件：在用戶導(dǎo)航離開(kāi)頁(yè)面時(shí)觸發(fā)，無(wú)論頁(yè)面是否被存入 bfcache。event.persisted：pagehide 事件對(duì)象的一個(gè)屬性。如果頁(yè)面被存入 bfcache，它為 true；否則為 false。
代碼示例：
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
console.log('頁(yè)面正在進(jìn)入 bfcache');
} else {
console.log('頁(yè)面正在被正常卸載');
}
// 無(wú)論哪種情況，這里都是發(fā)送 Beacon 的好時(shí)機(jī)
navigator.sendBeacon('/log', getAnalyticsData());
});
pagehide 比 unload 更可靠，特別是在移動(dòng)設(shè)備上。因此，推薦使用 pagehide 來(lái)代替 unload。
最終建議
- 對(duì)于“可見(jiàn)性”判斷：優(yōu)先使用 Page Visibility API。
- 對(duì)于“離開(kāi)時(shí)上報(bào)數(shù)據(jù)”：使用
navigator.sendBeacon()，并將其放在 pagehide 事件監(jiān)聽(tīng)器中，以獲得最佳的兼容性和可靠性。 - 對(duì)于“防止數(shù)據(jù)丟失”：僅在必要時(shí)使用
beforeunload，因?yàn)樗鼤?huì)中斷用戶操作。 - 避免使用
unload：除非我們只需要執(zhí)行一些非常簡(jiǎn)單的同步代碼，否則盡量避免使用它，尤其不要在其中包含異步網(wǎng)絡(luò)請(qǐng)求。
通過(guò)組合運(yùn)用這些現(xiàn)代 API，我們不僅能準(zhǔn)確地判斷用戶的行為，還能在不犧牲性能和可靠性的前提下，打造出更智能、更友好的用戶體驗(yàn)。
?
閱讀原文：https://mp.weixin.qq.com/s/LMxZ-ndewJX5KBwc0bpW_Q
該文章在 2025/6/26 18:56:05 編輯過(guò)
400 186 1886
