브라우저가 화면을 그리기까지 무슨 일이 일어나는가?

HTML과 CSS를 각각 트리로 만들고 둘을 합쳐 위치를 계산한 뒤 픽셀로 칠한다. 어느 단계를 건드리느냐에 따라 비용이 크게 갈린다.

스타일을 바꾸면 어디까지 되돌아가는지가 성능을 가른다. 너비나 위치를 건드리면 레이아웃부터 다시 한다. 색만 바꾸면 페인트만 다시 한다. transform과 opacity는 합성 단계에서만 처리돼 앞의 둘을 건너뛴다.

자바스크립트가 이 흐름을 막을 수 있다. CSSOM이 완성되기 전에는 스크립트를 실행할 수 없고, 스크립트가 도는 동안에는 파싱이 멈춘다. 스타일시트를 위에, 스크립트를 아래에 두라는 오래된 조언이 여기서 나왔다.

스타일을 바꾼 직후에 offsetHeight 같은 값을 읽으면 브라우저가 그 자리에서 레이아웃을 다시 계산한다. 반복문 안에서 쓰기와 읽기를 번갈아 하면 매 회전마다 그 비용이 든다.