Layout Thrashing와 Reflow

Reflow란?

브라우저에서 DOM의 위치와 크기를 계산하는 일

 

Layout Thrashing이란?

Reflow는 시간이 오래 걸리는 무거운 작업이므로 브라우저 렌더링 엔진은 Reflow가 발생할 때마다 실행하지 않고 큐에 모아서 어느 순간에 한꺼번에 batch로 처리하는데, getClientBoundingRect(), scrollTop과 같은 함수들이 호출되면 최신 스타일을 반영해서 돌려주기 위해 그동안 모아놨던 큐를 비우면서 전부 처리한다. 브라우저가 성능 향상을 위해 기껏 reflow 발생시키는 애들을 큐에 모아놨는데, 자꾸 scrollTop, innerWidth 등을 호출해버리면 reflow가 그만큼 매번, 자주 일어나게 되어 성능 저하로 이어진다. 왜 저런 프로퍼티, 메소드가 DOM을 변화시키는 것도 아닌데 왜 reflow를 발생시킨다고 하는지 궁금했는데 해결되었다.