Wie kann ich die Leerlaufzeit von Benutzern in JavaScript erkennen, um Webanwendungen zu optimieren?

Erkennung von Leerlaufzeiten in JavaScript

Die Erkennung von Leerlaufzeiten ist für die Optimierung des Benutzererlebnisses in Webanwendungen unerlässlich, beispielsweise beim Vorladen von Inhalten oder beim Abmelden inaktiver Benutzer. In JavaScript kann Leerlaufzeit als Zeitraum der Benutzerinaktivität oder minimaler CPU-Auslastung definiert werden.

Leerlaufzeiterkennung mit Vanilla-JavaScript

Um Leerlaufzeit mit Vanilla-JavaScript zu erkennen, können Sie eine Funktion implementieren das DOM-Ereignisse nutzt, um die Benutzeraktivität zu überwachen. Hier ist eine Beispielimplementierung:

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

Rufen Sie die Funktion inactivityTime() auf, um die Leerlaufzeiterkennung bei Bedarf zu initialisieren, z. B. beim Laden der Seite:

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

Verwendung zusätzlicher DOM-Ereignisse

Um die Erkennungsgenauigkeit zu verbessern, können Sie weitere DOM-Ereignisse hinzufügen, um Benutzerinteraktionen zu überwachen. Einige häufig verwendete Ereignisse umfassen:

• document.onload
• document.onmousemove
• document.onmousedown
• document. ontouchstart
• document.onclick
• document.onkeydown
• document.addEventListener('scroll', resetTimer, true) (Verbesserte Version für die Handhabung des Scrollens innerhalb scrollbarer Elemente)

Verarbeiten von Ereignissen in der Erfassungsphase

Um sicherzustellen, dass Ereignisse während der Erfassungsphase abgefangen werden, verwenden Sie das dritte Argument in addEventListener() wie folgt:

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

Durch die Integration dieser Techniken können Sie Leerlaufzeiten in JavaScript effektiv erkennen und geeignete Maßnahmen ergreifen, um den Benutzer zu verbessern Erfahrung.

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