최적화된 콘텐츠 로딩을 위해 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은 스크롤 가능한 요소 내에서 스크롤을 감지하지 않습니다. 이 문제를 해결하려면 세 번째 인수를 true로 설정한 window.addEventListener('scroll', ResetTimer, true)를 사용하세요.
이러한 기술을 사용하면 JavaScript에서 유휴 시간을 정확하게 감지하여 콘텐츠 로딩을 최적화할 수 있습니다. 향상된 사용자 경험을 위한 전략
위 내용은 콘텐츠 로딩을 최적화하기 위해 JavaScript에서 유휴 시간을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!