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