🌐 브라우저 Resize 이벤트 최적화 하기

...

Window Resize Event

브라우저 & 윈도우 화면 높이 / 너비 구하는 법

window.innerWidth; // 브라우저 화면의 너비
window.innerHeight; // 브라우저 화면의 높이
window.outerWidth; // 브라우저 전체의 너비
window.outerHeight; // 브라우저 전체의 높이

[JS] 📚 브라우저 & 윈도우 화면 - 높이/너비 구하기

클라이언트(브라우저) 높이/너비 구하기 표준이 아닌 방법들로 해보니 브라우저 환경에 따라 인식이 이상하게 되는 경우가 발생했다. 제일 확실한 방법은 screen 객체를 활용하거나 HTML5 표준을

inpa.tistory.com

브라우저 resize 이벤트 최적화

window의 resize 이벤트를 그대로 사용하면 브라우저 창 리사이징시마다 콜백 코드가 실행된다. 의도적으로 매 resize마다 코드를 실행해야 하는 경우도 있겠지만, 그렇지 않은 경우라면 이는 매우 비효율적이고 브라우저에 과부하를 줄 수도 있다.

// Javascript
window.addEventListener('resize', function(){
    console.log('resize event!');

    if (window.innerWidth <= 800) {
      alert('현재 브라우저 크기가 <= 800px');
    }
});


// jQuery
$(window).on('resize', function(){
    console.log('resize event!');

    if (window.innerWidth <= 800) {
      alert('현재 브라우저 크기가 <= 800px');
    }
});

코드를 실행해보면 움짤 사진에서 볼 수 있듯이, 매 resize시마다 이벤트가 실행된다.

보통 리사이징 이벤트를 걸어놓는 이유는 현재 브라우저 창 가로폭 길이를 구해 그에 따른 반응형을 구현하기 위함이다. 따라서 브라우저 창을 리사이징 할때마다 이벤트 코드를 실행하는 것이 아닌, 브라우저 창 늘리기를 끝낸 뒤에 이벤트를 실행토록 하면 보다 최적화된 프로그램을 구성할 수 있을 것이다.

이번 포스팅에서는 가장 간단하게 사용하기 좋은 setTimeout 메소드를 이용해 최적화를 시키는 방법을 소개해 본다.

let delay = 300;
let timer = null;

// Javascript
window.addEventListener('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
        
        if (window.innerWidth <= 800) {
      		alert('현재 브라우저 크기가 <= 800px');
   		}
	}, delay);
});


// jQuery
$(window).on('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
        
        if (window.innerWidth <= 800) {
      		alert('현재 브라우저 크기가 <= 800px');
    	}
	}, delay);
});

브라우저 창을 늘리고 줄일때마다 코드가 실행되지 않고 resize를 마치면 좀 있다가 이벤트 코드가 실행되는 걸 볼 수 있다.

timer에 setTimeout 메소드로 0.3마다 콘솔을 찍게 해놨는데 0.3초가 지나기전 resize이벤트가 발생되면 계속 timer값이 계속 덮히는 것이다.

resize 이벤트는 오직 window 객체(document.defaultView)에서만 발생된다.
그래서 만일 브라우저의 폭이 아닌 DOM의 엘리먼트 요소의 폭 resize 이벤트 알림을 받길 원한다면, resize 이벤트 핸들어가 아닌 Resize Observer 기술을 사용하여야 한다.