프로파일링을 시작하자.

성능이 어떻게 안나오나를 찾기 위해서 보통 프로파일링을 한다.

성능이 안나오는 지점을 찾았다.

먼가 모르게 전체 수행시간의 % 가 높다.

그래서 가봤는데 내가 수정할 수 있는 곳이 아니네?

코드가 엄청 단순한데 ?

자, 여기서 부터 오류에 빠진다.

아니 코드가 엄청 단순한데 대부분의 CPU를 먹고 있는 상황이다.

이거 머지?

고칠 수가 없는데? 라고 생각하는 순간 프로그래밍을 계속해야 하나를 잠시 고민해야한다.

이런 경우는 함수의 호출 횟수 때문에 그런 경우가 많다.

호출 횟수를 체크하자.

호출 횟수를 체크 할 때 잘 봐야 하는 부분이 있다.

CPU 를 제일 하단에서 많이 잡아먹었다는 것은 그 로직이 실행되는 함수를 많이 불렀단 소리다.

자 그럼 이제 위로 올라간다.

위로 올라가면서 점점 불려진 함수를 보러 간다.

그러다 보면 전혀 뜬금 없는 곳이 많이 불려질 때가 있다.

거기서 부터 시작해야한다.

물론 제일 하단에 실행되는 함수가 로직이 이상해서 CPU 를 많이 잡아 먹긴 하지만

근본 적인 원인은 그 함수가 많이 불려지기 때문이다.

많이 불려진다는 것은 어디선가 나도 모르게 계속 돌고 있다는 소리가 된다.

즉, 로직을 잘 못 설계 했을 수 있다.

호출을 줄이자.

아 ~ 호출을 줄 일려면 어떻게 해야하지?

함수가 불려지는 시점을 정확히 알아야한다.

간혹 이런 경우가 있다.

requestAnimationFrame 으로 callback 을 호출하는데 그 안에서 사소한 함수를 실행한다.

문제는 requestAnimationFrame 이 1초에 60번 실행되는데

필요하지도 않은 함수를 60번 씩 실행하고 있는거다..

그러면서 그 함수에서 배열이나 객체를 리턴해서 최상위 로직까지 저장되고 지워지고를 반복한다.

이래되면 어떻게 되냐면..

배열은 함수안에서 실행되고 살아지는게 아니라 계속 gc 대상이 된다.

gc 대상이 된다는 이야기는 화면이 멈추게 된다는 의미랑 같다.

엄청나게 많은 gc가 일어나면서 화면이 버벅이기 시작한다.

아주 작은 함수를 계속 실행함에 있어서 그런일이 발생할 수 있다. .

조심해야한다.

특히나 자바스크립트에서 객체나 배열을 생성하고 지속적으로 가지고 있는 부분은 캐슁을 하지 않으면

모조리 다 gc 대상이 되기 때문에 자기도 모르는 사이에 브라우저는 점점 느려지고 끊기고 뻗어버린다.

그 간단한 코드는 간단하니깐 아무도 신경쓰지 않는다.

경험이 필요하다.

이런 직관을 얻을려면 나름의 경험이 많이 필요하다.

자꾸 생각 해봐야하고 고민해야한다.