Wie kann ich Leerlaufzeiten in JavaScript erkennen, um das Laden von Inhalten zu optimieren?

Erkennen von Leerlaufzeiten in JavaScript für optimiertes Laden von Inhalten

Im JavaScript-Bereich ist das Erkennen von Leerlaufzeiten entscheidend für die Implementierung von Funktionen wie Pre-Fetching und Vorabladen von Inhalten, um das Benutzererlebnis zu verbessern. In diesem Artikel untersuchen wir Methoden, um zu erkennen, wann der Benutzer inaktiv ist, was auf einen Mangel an CPU-Auslastung oder Benutzerinteraktion hinweist.

Vanilla JavaScript Solution

Um dies zu erreichen, Wir können Vanilla-JavaScript mit dem folgenden Ansatz verwenden:

var inactivityTime = function () {
    var time;
    // Reset inactivity timer on page load and DOM events
    window.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        // Log out or perform any desired action upon idle time
        alert("You are now logged out.")
    }

    function resetTimer() {
        // Clear the timeout and set a new one for the idle time period
        clearTimeout(time);
        time = setTimeout(logout, 3000);
    }
};

Sobald diese Funktion definiert ist, können Sie sie bei Bedarf initialisieren (z. B. auf der Seite). Load):

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

Zusätzliche DOM-Ereignisse für verbesserte Präzision

Um die Leerlaufzeiterkennung zu verfeinern, können Sie weitere DOM-Ereignisse einschließen, die Benutzeraktivität anzeigen. Hier sind häufig verwendete Ereignisse:

document.onload
document.onmousemove
document.onmousedown
document.ontouchstart
document.onclick
document.onkeydown

Sie können auch ein Array verwenden, um mehrere Ereignisse zu registrieren:

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

Überlegungen zu Scrolling-Ereignissen

Beachten Sie, dass window.onscroll das Scrollen innerhalb scrollbarer Elemente nicht erkennt. Um dieses Problem zu beheben, verwenden Sie window.addEventListener('scroll', resetTimer, true) mit dem dritten Argument auf true.

Mit diesen Techniken können Sie Leerlaufzeiten in JavaScript genau erkennen und so das Laden von Inhalten optimieren Strategien für verbesserte Benutzererlebnisse.

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