JavaScript でアイドル時間を検出してコンテンツのプリフェッチとプリロードを最適化するにはどうすればよいですか?

JavaScript でのアイドル時間の検出: コンテンツのプリフェッチとプリロードのためのガイド

Web 開発では、ユーザー エクスペリエンスを最適化するためにアイドル時間の検出が重要になる場合があります。ユーザーが非アクティブな時間または最小限の CPU 使用率として定義されるアイドル時間は、コンテンツをプリフェッチまたはプリロードする機会を提供し、ページの読み込み時間を短縮し、応答性を向上させます。

バニラ JavaScript でのアイドル時間検出の実装

バニラ 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

または、配列を使用してイベントを動的に登録します:

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) に 3 番目の引数を含めて、キャプチャ フェーズ中にイベントをキャプチャします。

以上がJavaScript でアイドル時間を検出してコンテンツのプリフェッチとプリロードを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。