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

Window Resize Event

 

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

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

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

---

브라우저 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 기술을 사용하여야 한다.