ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でアイドル時間を検出してコンテンツの読み込みを最適化するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-12-12 12:27:24
オリジナル
794 人が閲覧しました

How Can I Detect Idle Time in JavaScript to Optimize Content Loading?

コンテンツの読み込みを最適化するための 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート