음악, 삶, 개발
DOM 의 성능을 생각한다면 해야할 행동들. 본문
그동안 Web UI 를 개발해오면서 진짜 다양한 시도를 해보았다고 생각한다.
내가 느낀건 생산성 <-> 성능 은 절대 비례 관계가 아니라는것이다. 사실 거의 반비례 관계 같기도했다.
음악 관련 UI 들 특징이 버튼을 하나 눌렀을때 동시 다발적으로 여기저기서 변화가 일어나게된다.
심지어 내가 만든 App 에서는 버튼 하나를 누르면 128개의 색깔이 변경되어야하는것도 있다.
이는 곧 동시에 여러가지 DOM 의 변화가 일어난다는것이다.
이 부분에서, 모든걸 캔버스에 그려버리는 Pixi.js 를 선택했었는데 결과적으로 나쁜 선택은 아니었으나,
그다지 엄청 좋은 선택도 아니어서 2달간 시도후 DOM 으로 돌아오게되었다. (이에 대한 이야기는 따로 정리하겠음).
하여튼 React 나 Vue 같이 생산성이 좋은 경우 대부분 성능의 저하를 꽤나 경험한거같다.
결국 모든 옵션을 뒤로하고 Pure DOM 으로 돌아오게되었고,
이 Pure DOM 안에서도 다양한 성능 차이를 경험하게되었는데, 이에 대해 간단히 정리해보려한다.
먼저 서술하면, 내가 생각한 이 방법들을 사용할때 꽤 많이 생산성을 포기해야한다.
1. DOM 을 가능한한 얇게 유지한다.
가장 중요한 fact 다.
즉, 쓸데없이 wrapper 또는 container 요소를 최대한 만들지않는다.
쓸데없지는 않더라도 어떻게든 얇게 하려고 유지해야한다.
<div id="parent">
<div id="child">
<div id="grand-child"></div>
</div>
</div>보다는
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>최대한 이렇게 해야한다.
DOM 요소의 nesting 을 최소화한 결과 꽤나 큰 성능 향상을 이뤄냈다.
하지만 반면 layout 의 난이도가 급격히 상승하게되며, 이의 해결방안은 2번째이다.
2. 무조건 position: absolute 만 사용한다.
DOM 요소를 매우 얇게 가져갈때 가장 큰 불편함은 wrapper 요소가 없으니
grid 나 flex 로 복잡한 레이아웃을 구현하기 힘들게 되는데, 결국 그냥 absolute position 화 해야한다.
absolute 의 또 하나의 장점은 애초에 다른 요소의 layout 에 전혀 영향을 미치지않기때문에
contain: layout size 이딴 최적화를 따로 골치아프게 하지않아도 되는것이다.
그냥 absolute 자체로 이미 모든것이 정리된것이다.
absolute position 된 요소들이 대부분의 경우에 width height 의 animation 을 실행해도
크게 느리다거나 그렇지않았다.
wrapper 요소가 많은 경우 다른 레이아웃에 덕지덕지영향을 주어 퍼포먼스가 급격히 하락한다.
3. 크롬 성능 프로파일링 또는 CPU 사용량 확인보다 그냥 구린 디바이스에서 테스트하여 사용성으로써 느끼는게 훨씬 더 정확하다.
크롬 개발자 콘솔이 무의미하다는것은 아니지만, 결국 사용자 측면에서 느린지 빠른지 확인하는 방법은
구형 폰 (아이폰 5s) 또는 느린 안드로이드 태블릿에서 직접 돌려보는것이다.
얘를 들어 css transform 이 빠르다고하지만, 안드로이드 태블릿에서 width height 보다 느리게 작동하는 경우도 있기때문이다.
따라서 작업용 노트북에서 잘 돌아갔다고 해서 모바일 환경에서는 너무도 많은 변수가 존재하여서
나는 그냥 디바이스에서 실행해보면서 테스트하는것이 정확하다고 생각한다.
