브라우저의 렌더링 순서와 performance를 고려한 코드를 작성하자.
🕹 요소 실시간으로 이동시키기
다음과 기능을 위해 요소를 계속해서 실시간으로 움직여야 한다.
- 키를 눌러 용사를 움직여야한다.
- 유령은 매 라운드마다 화면 위에서 아래로 이동해야한다.📌 top과 left값 변경하기
이 두가지를 구현하기 위한 가장 쉬운방법은 js에서 동적으로 요소의 top과 left를 빠르게 변경해주는 것이다.
하지만.. 브라우저의 성능을 고려해 코드를 작성할 때 이 방법이 최선일까?
📌 translate
top과 left보다는 transform을 사용해 코드를 작성하기로 결정했다.
이전에 배웠던 브라우저 렌더링 단계를 짚어보자.
🕹 브라우저 렌더링 단계
🕹 성능 비교
직접 먼저 전체 게임을 top과 left를 사용해 만든 뒤, 성능을 측정하고 다시 transform을 사용해 리팩토링 한 뒤 성능을 측정한다면 정말 명확한 비교가 되었겠지만, 아쉽게도 그렇게 하지는 못했다.
이 프로젝트에만 너무 많은 시간을 할애할 수는 없었고, 게임의 구현사항 또한 정해진 게 없어 만들면서 만들어갔기 때문이다.
처음부터 규모를 키우기보다는 일단 플레이할 수 있도록 게임의 전체과정을 구현하는 것을 우선순위로 삼았다.
대신, 아주 간단한 코드를 작성한 뒤 이벤트를 발생시켜 각각의 코드의 성능을 비교해보았다.
mosemove event를 주어 화면안에서 마우스를 움직이면 커서에 이미지가 따라오며 이동할 수 있도록 위치를 변경해주었다.
이때, mousemove event가 발생할 때마다 요소의 위치를 변경하는 방식에 따른 성능은 어떤 차이가 있는지 살펴보자.
📌 top과 left 사용
📌 translate 사용
단순히 마우스를 이동할 때도 이렇게 큰 차이가 나는데,
hero를 키를 누를 때마다 움직이고
ghostField를 20ms마다 1px씩 움직인다면?
브라우저 성능에 큰 차이가 날 것이다.
게다가 위에서 테스트한 것과 달리 지금 만드는 게임은 규모가 더 있기 때문에, 복잡한 렌더링 단계에서 성능을 최대한 고려하는 것이 필요하다고 판단했다.
🕹 변화할 때마다 위치와 너비 찾기
top과 left를 사용하면 간단한 문제를 transform을 사용하니 고민해야 하는 것들이 많아졌다.
pageXoffset과 같은 좌표로는 이동하는 요소의 위치를 알 수 없었다.
getBoundingClientRect()를 사용해 위치 정보를 얻었다.
위치가 바뀔때마다 함수를 호출해야 하는 경우가 있었다. 예를 들면
- bullet이 이동할 때마다 ghost근처에 왔는지 판별하기
- ghostField가 이동할 때마다 화면 아래까지 도달했는지 판별하기이 때는 transform을 사용했기 때문에 각 속성에 transition 속성값을 부여하고,
transitionend event를 설정해 transition이 끝날때마다 필요한 함수를 호출하도록 했다.
🕹 완성한 시점에서 실제 프로젝트 성능 측정하기
experience가 좋지 않은 부분이 비중이 크지는 않지만 드문드문 발생하는 것을 볼 수 있다. 주로 hero가 총을 쏠 때 발생하는 것 같은데, 이 부분에 대해서는 다시 한번 리팩토링을 하면서 개선시켜 보려고 한다.
Reference
