브라우저 랜더링

• 순서

1. HTML 파싱 + DOM 트리 생성 (바이트->문자->토큰->노드->DOM)

   바이트 형태로 받은 HTML파일을 문자로 변경한 후,
   토큰과 비교하여 해당 문자가 HTML인지 확인.
   그 후, 노드 생성.
   마지막으로 DOM 트리 생성

2. CSS 파싱 + CSSOM 트리 생성 (바이트->문자->토큰->노드->CSSOM)

   1번과 비슷하게 바이트 형태로 받은 CSS파일을 문자로 변경 후,
   토큰과 비교하여 해당 문자가 CSS인지 확인하고 노드 생성,
   CSSOM 트리 생성

3. 랜더 트리 생성

   DOM과 CSSOM을 모아서 랜더 트리 생성

4. 레이아웃(리플로우)
5. 페인트(리페인트)
6. composite

   페인트까지 끝나면 실행된다.
   페인트 단계에서 만들어둔 것을 토대로 하나의 페이지 생성.

• 주의점

*  리플로우와 리페인트는 동시에 실행되지 않고 순차적으로 실행됨.
*  레이아웃의 영향이 없는 변경은 리플로우 없이 리페인트로만 실행됨.
*  transform과 opacity는 리플로우, 리페인트 생략