HTML과 CSS가 렌더링 되는 과정
웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드로 이루어진 트리를 만든다.
CSS파일과 HTML의 요소들의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 트리도 생성한다.
이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산한다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있다.이 과정에서 이 메소드들이 호출하게 되며, 해당 메소드는 스타일 정보를 계산하고 결과값을 객체 형태로 반환한다.
이때 이 계산 과정은 모두 동기적으로 동작하게 되며, 만약 렌더 트리에 새로운 노드가 추가된다면 해당 노드의 attach 메소드가 실행되어 계산 과정을 거치게 된다.
렌더 트리는 Attachment 과정을 거친 후 레이아웃이라는 과정을 거치게 된다. 이 레이아웃 과정에서는 브라우저가 렌더 트리의 각 노드들에 좌표를 부여하고 정확히 어디에 어떻게 표시되는지를 결정한다.
마지막으로 브라우저는 페인팅(Painting)이라는 과정을 거치게 된다. 이 과정에서는 각 노드에 paint함수를 호출하여 렌더링된 요소들에 색상을 입히게 된다.
이 과정을 거쳐 표시된 HTML을 자바스크립트를 사용하여 DOM을 조작하게 되면 각 노드의 좌표를 계산하기 위해 레이아웃 과정이 다시 실행된다. 그 후 색상을 입히기 위한 페인팅 과정도 다시 진행된다. 이렇게 DOM 조작으로 레이아웃 과정이 다시 진행되는 것을 리플로우(Reflow)라고 한다. 페인팅 과정을 다시 진행하는 것은 리페인트(Repaint)라고 한다. 이 두 가지는 DOM의 각 노드에 대한 연산 과정을 다시 수행함으로 많이 수행되면 성능이 저하되는 문제가 발생한다.
