우테코에서 가상돔과 비교 알고리즘, 렌더러 함수를 만드는 미션을 하고 있다.
하다가 갑자기 궁금한 것이 생겼다.
이렇게 element가 있을 때, 첫 번째와 세 번째의 textContent를 변경한다고 생각해보자. 그러면 자바스크립트는 동기적이기 때문에 첫 번째의 textContent를 바꾸고 난 다음에 세 번째의 textContent를 바꿀 것이다. 그러면 레이아웃이 두 번 발생하는 것이 아닐까? 라는 의문이 들었다.
예전에 가상돔에 대해 공부할 때 이런 말을 본 적이 있다. 브라우저는 batching을 통해 어느 정도의 업데이트를 모아서 한번에 처리한다. 즉, 리액트에서 state를 업데이트 할 때 batching 하는 것과 비슷하다고 생각하고 있었다. 그렇게만 알고 있었고, 실험을 통해 눈으로 확인하지는 못했었다.
오늘 기회가 된 것 같아서 실험을 해봤다. element를 1000개 만들어두고, 마우스를 클릭할 때마다 짝수 번째의 element들의 textContent를 변경했다. 500번의 레이아웃이 발생할 것인가 1번의 레이아웃이 발생할 것인가?
결과는 1번의 레이아웃이 발생했다. 즉, 자바스크립트로 동기적으로 DOM을 업데이트해도, DOM에서 한번에 처리하도록 최적화가 되어 있는 것이다. 50000개의 element로도 실험을 해봤지만 한번의 레이아웃만 발생했고, 끊기지 않고 들어오는 DOM 업데이트 작업이라면 모두 처리하는 것 같다는 느낌을 받았다. 클릭을 엄청나게 빠르게 해도 레이아웃은 클릭한 개수 만큼 발생했다. 따라서 끊기지 않고 들어오는 DOM 업데이트까지가 batching으로 한번에 작업이 되는 것이다.
실험 방법이 옳고, 정확한지 모르겠지만 예전에 궁금했던 것을 이번 실험으로 해결하게 되어서 좋았다. 남은 미션도 열심히 고고~
