렌더링

서버로부터 HTML 파일을 받아서, 브라우저 영역에 뿌려주는 과정을 렌더링이라고 한다.

1. 먼저 브라우저가 서버로부터 HTML 문서를 내려 받는다.

2. 렌더링 엔진이 HTML 문서를 파싱해서 DOM 트리를 구성한다.

3. 외부 CSS와 함께 스타일 요소들을 파싱해서 CSSOM 트리를 생성한다.
   => 이 때, 스타일은 브라우저 자체 스타일, 사용자 정의 스타일, HTML 태그에 걸려있는 스타일 순서대로 처리됨
   (그래서 html에 인라인으로 태그에 걸려있는 스타일 속성이 먼저 적용되는 거임)

4. 이 DOM 트리 + CSSOM 트리를 하여서 렌더링 트리 생성하고(head, display = none인 요소는 포함 x), 각 노드의 크기와 위치를 계산한다.(레이아웃(리플로우) 단계)

5. 여기까지 수행하면, 렌더링 엔진이 각 요소가 어디 어떤 크기로 표현되는지 알 수 있게 되고, 페인트 이벤트를 발생시켜 화면에 그린다.(페인팅(레스터화))

6. 이후에 렌더링이 끝나고 사용자와의 interaction에 의해서 화면 영역이 바뀔 일이생기면,
   리플로우 또는 리페인트 발생.

• 레이아웃이 변경되는 경우 : 리플로우 + 리페인트
• 레이아웃은 변화 없이 화면에 변화에 영향을 주는 element가 변경 : 리페인트만

출처,참고 URL : https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80