JavaScript でアイドル時間を検出してコンテンツの読み込みを最適化するにはどうすればよいですか?

コンテンツの読み込みを最適化するための JavaScript でのアイドル時間の検出

JavaScript の領域では、プリフェッチなどの機能を実装するためにアイドル時間の検出が重要です。ユーザーエクスペリエンスを向上させるためにコンテンツをプリロードします。この記事では、ユーザーがアイドル状態であること、つまり CPU 使用率やユーザー インタラクションが不足していることを検出する方法を検討します。

バニラ JavaScript ソリューション

これを実現するには、次のアプローチでバニラ JavaScript を使用できます:

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

この関数を定義したら、必要に応じて初期化できます。 (例: ページ読み込み時):

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

精度を向上させるための追加の DOM イベント

アイドル時間の検出を改良するには、ユーザーを示す DOM イベントをさらに含めることができます。活動。一般的に使用されるイベントは次のとおりです:

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

配列を使用して複数のイベントを登録することもできます:

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

イベントのスクロールに関する考慮事項

window.onscroll はスクロール可能な要素内のスクロールを検出しないことに注意してください。これに対処するには、3 番目の引数を true に設定して window.addEventListener('scroll',resetTimer, true) を使用します。

これらの手法を使用すると、JavaScript のアイドル時間を正確に検出でき、コンテンツの読み込みを最適化できます。ユーザー エクスペリエンスを向上させるための戦略。

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