如何偵測 JavaScript 中的空閒時間以優化內容預取和預先載入？

偵測 JavaScript 中的空閒時間：預取和預先載入內容指南

在 Web 開發中，偵測空閒時間對於最佳化使用者體驗至關重要。空閒時間定義為使用者不活動或 CPU 使用率最低的時間段，它提供了預取或預先載入內容的機會，從而減少頁面載入時間並增強回應能力。

在Vanilla JavaScript 中實作空閒時間偵測

要在Vanilla JavaScript 中啟用空閒時間偵測，請使用以下方法：

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

初始化和自訂

定義inactivityTime 函數後，在需要的地方初始化它（例如onPageLoad）：

window.onload = function() {
  inactivityTime();
}

您可以透過新增更多DOM 事件來進一步自訂事件偵聽器，包括：

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

或者，使用動態註冊事件array:

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});

請注意，如果捲動發生在可捲動元素內，則window.onscroll 將不會觸發。為了解決這個問題，請在 window.addEventListener('scroll', resetTimer, true) 中包含第三個參數以在捕獲階段捕獲事件。

以上是如何偵測 JavaScript 中的空閒時間以優化內容預取和預先載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！