콘텐츠 로딩을 최적화하기 위해 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은 스크롤 가능한 요소 내에서 스크롤을 감지하지 않습니다. 이 문제를 해결하려면 세 번째 인수를 true로 설정한 window.addEventListener('scroll', ResetTimer, true)를 사용하세요.

이러한 기술을 사용하면 JavaScript에서 유휴 시간을 정확하게 감지하여 콘텐츠 로딩을 최적화할 수 있습니다. 향상된 사용자 경험을 위한 전략

위 내용은 콘텐츠 로딩을 최적화하기 위해 JavaScript에서 유휴 시간을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!