Heim > Web-Frontend > js-Tutorial > Wie kann ich Leerlaufzeiten in JavaScript erkennen, um den Vorabruf und das Vorladen von Inhalten zu optimieren?

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

DDD
Freigeben: 2024-12-26 02:30:10
Original
359 Leute haben es durchsucht

How Can I Detect Idle Time in JavaScript to Optimize Content Pre-fetching and Pre-loading?

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
    }
};
Nach dem Login kopieren

Initialisierung und Anpassungen

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

window.onload = function() {
  inactivityTime();
}
Nach dem Login kopieren

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
Nach dem Login kopieren

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);
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage