브라우저의 렌더링 과정
어떤 페이지에 방문하여 HTML 파일을 받게되면, 이를 위에서부터 파싱하여 DOM 을 생성합니다.
그러던 중 link 태그를 만나 CSS 파일을 읽게 되면 이를 파싱하여 CSSOM 을 생성하고, DOM과 CSSOM 을 이용하여 렌더트리를 생성합니다.
이후 렌더트리를 이용하여 각 요소의 위치를 결정하는 레이아웃 과정을 거친 후, 페인트 과정을 거쳐 요소들을 표시합니다.
만약 레이아웃에 변화가 생기는 경우 렌더트리를 다시 생성하여 레이아웃 과정을 진행하는 리플로우와 다시 요소를 표시하는 리페인트가 발생합니다.
-
HTML 받음-DOM 생성-CSSOM 생성-렌더트리 생성-레이아웃-페인트 -
이후 레이아웃 변경 시
리플로우-리페인트 -
해당 과정을 최적화하기 위해 탄생한 것이
Virtual DOM이다. -
위의 내용과 연관 지을 수 있는 것 ->
Virtual DOM,link 태그와 script 태그의 위치,script async, defer
