Wie kann ich Leerlaufzeiten in JavaScript erkennen, um den Vorabruf und das Vorladen von Inhalten zu optimieren?

Erkennen von Leerlaufzeiten in JavaScript: Ein Leitfaden zum Vorabrufen und Vorladen von Inhalten

Bei der Webentwicklung kann das Erkennen von Leerlaufzeiten für die Optimierung der Benutzererfahrung von entscheidender Bedeutung sein. Leerlaufzeit, definiert als Zeitraum der Benutzerinaktivität oder minimaler CPU-Auslastung, bietet die Möglichkeit, Inhalte vorab abzurufen oder zu laden, wodurch die Ladezeiten von Seiten verkürzt und die Reaktionsfähigkeit verbessert werden.

Implementierung der Leerlaufzeiterkennung in Vanilla JavaScript

Um die Leerlaufzeiterkennung in Vanilla JavaScript zu aktivieren, verwenden Sie den folgenden Ansatz:

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
    }
};

Initialisierung und Anpassungen

Sobald die inactivityTime-Funktion definiert ist, initialisieren Sie sie an der gewünschten Stelle (z. B. onPageLoad):

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

Sie können die Ereignis-Listener weiter anpassen, indem Sie weitere DOM-Ereignisse hinzufügen, darunter:

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

Oder registrieren Sie Ereignisse dynamisch mithilfe eines Arrays:

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

Beachten Sie Folgendes window.onscroll wird nicht ausgelöst, wenn innerhalb eines scrollbaren Elements gescrollt wird. Um dies zu beheben, fügen Sie das dritte Argument in window.addEventListener('scroll', resetTimer, true) ein, um das Ereignis während der Erfassungsphase zu erfassen.

Das obige ist der detaillierte Inhalt vonWie kann ich Leerlaufzeiten in JavaScript erkennen, um den Vorabruf und das Vorladen von Inhalten zu optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!