자바스크립트를 활용한 인터랙션 성능 최적화

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.)

www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6

 

 

 

자바스크립트는 아주 근본적인 문제를 가지고 있습니다. 그것은 바로 우리가 쓰는 자바스크립트와, 실제 브라우저가 수행하는 코드가 100% 일치하지 않는다는 것입니다. 자바스크립트는 브라우저의 엔진을 통해 컴파일됩니다. 이때 이 컴파일러를 JIT(Just In Time)이라 통칭합니다.

 

그러므로 자바스크립트는 근본적으로 저수준 레벨에서의 최적화는 불가능합니다. 따라서 어떤 제어문이 더 좋은 성능을 내는지 등은 고려하지 않아도 됩니다. 하지만, 꼭 저수준 레벨에서 최적화를 하지 않더라도 다른 방법으로 엄청난 수준의 최적화를 수행할 수 있습니다.

 

 

 

자바스크립트를 통한 애니메이션 최적화

 

requestAnimationFrame 함수의 활용

 

보통 애니메이션은 CSS 의 keyframes 을 사용하고는 합니다만, 매우 복잡하거나 부드러운 애니메이션이 필요하다면 적절하지 않은 선택일수도 있습니다. 이보다 높은 성능의 애니메이션을 사용할 수 있는 방법은 자바스크립트를 통해 애니메이션을 발생시키는 것이며, 그 핵심은 매 프레임의 최대한 초기 단계에 애니메이션 수행을 요청하는 함수를 실행시키는 것입니다.

 

이때 이 함수의 실행까지는 최대 3 ~ 4ms 가 걸려야 합니다. 왜냐하면 스타일, 레이아웃, 페인트, 합성에 필요한 처리시간이 따로 있기 때문입니다. 즉, 자바스크립트 코드를 그렇게 많이 넣을수도 없다는 뜻입니다.

 

자바스크립트가 아닌 다른 수단을 통한 애니메이션 호출은 구조적으로 성능 이슈를 가질 수밖에 없습니다. 왜냐하면 애니메이션을 수행하기 위해 브라우저가 스타일 과정을 막 거치고 있는 바로 그 시점에, 갑자기 수행되어야 하는 어떠한 자바스크립트 처리 등의 동작을 브라우저가 발견하면 그 과정을 중단하고 해당 동작을 수행한 다음 다시 일에 처음부터 참여하기 때문입니다. 기존에 작업하던 프레임 하나가 통채로 날아가고, 브라우저는 했던 일을 또 할 수 있는 것입니다. 하지만 자바스크립트를 통해 애니메이션이 수행되게 하면 그러한 개입 없이 처리가 가능합니다.

 

 

 

web worker 의 활용

 

 

브라우저 환경에서의 자바스크립트는 하나의 스레드 안에서만 처리됩니다. 하지만 브라우저는 Worker 스레드라는 별도의 백그라운드 스레드를 지니고 있고, 웹 워커를 사용하면 특정 자바스크립트 처리를 이 웹 워커 스레드로 옮겨 수행할 수 있습니다. 환상적인 점은, 이렇게 하면 메인 스레드는 매우 오래걸리는 작업을 웹 워커로 외주를 맡겨서 처리할 수 있고, 두 스레드 간에는 통신이 가능하기 때문에 작업이 완료되면 그에 따른 작업도 수행할 수 있다는 것입니다.

 

 

 

GC(Garbage Collection)의 억제와 관리

 

자바스크립트는 자동적으로 가비지 컬렉션을 수행해줍니다. 덕분에 우리는 메모리상에서 객체를 직접 삭제하지 않아도 되고 로컬 변수 직접 설정해주지 않아도 됩니다. 하지만 문제는, 이 가비지 컬렉션이 브라우저에 의해 자동으로, 임의적으로 수행된다는 점입니다. 브라우저가 카비지 컬렉션을 수행하고 있을 때는, 다른 모든 작업이 멈춰버립니다. 이 말은 즉 애니메이션이나 다른 처리를 브라우저가 수행하고 있을 때 가비지 컬렉션 떄문에 렉이 발생할 수 있다는 의미입니다.

단순히 당신이 가비지 컬렉션이 일어나지 않을만한 코드를 짠다고 해결할 수 있는 문제는 아닐 수 있습니다. 당장 작성된 자바스크립트와 브라우저가 실행하는 코드가 100% 일치하지 않을 뿐더러(JIT), 개발에 사용하는 다른 프레임워크나 라이브러리가 가비지 컬렉션을 일으킬 수도 있기 때문입니다.

 

그러므로 Performance 패널의 메모리 타임라인에서 2가지를 체크해줄 필요가 있습니다.

 

• 가비지 컬렉션이 자주 일어나고, 그 때의 메모리의 증감폭이 매우 가파른가?
• 가비지 컬렉션이 일어났을 때, 메모리가 다시 완전히 초기 상태로 돌아가는가? 그게 아니라면 메모리 누수가 일어나고 있는 것일 수도 있다.