브라우저는 화면을 어떤 순서로 그리는가?

스타일 계산, 레이아웃, 페인트, 합성 순서다. 무엇을 바꿨느냐가 어느 단계부터 다시 하는지를 정하고, 그 차이가 렌더링 성능의 뿌리다.

기하를 바꾸면 비싸다. 너비나 글꼴 크기처럼 크기·위치에 닿는 값은 레이아웃부터 다시 하고, 문서 흐름 안에서는 한 상자의 변화가 이웃까지 밀어내 범위가 번진다.

색만 바꾸면 레이아웃은 건너뛰고 페인트부터 한다. transform과 opacity는 요소가 제 층을 갖고 있으면 합성만으로 처리돼 앞 단계를 통째로 건너뛴다 — 애니메이션에 이 둘을 권하는 이유다.

스타일 계산의 비용은 영향 받는 요소 수와 선택자 구조에 달렸다. 어느 단계가 병목인지는 화면마다 달라서, 짐작 대신 프로파일러로 재는 것이 순서다.

면접에서는 바꾼 속성을 단계에 대응시키는지를 본다. 무엇이 느린가라는 질문은 결국 어느 단계부터 다시 하게 만들었는가라는 질문이다.