브라우저 렌더링 , 파싱??

• 사용자가 페이지에 접속해서 HTML을 서버로부터 내려받으면 브라우저 엔진이 이를 파싱한다

(파싱이라는 단어를 찾아보니 그냥 구문분석 이라고 나온다. 그냥 엔진이 읽는다 정도인듯)

• 파싱을 하면서 DOM트리를 만든다. Link태그를 만나서 stylesheet를 내려받을경우 css파싱을 통해 cssom트리를 만든다.

(DOM트리랑 cssom트리도 나중에 따로 정리해야 할듯 일단은 구조를 구축한다?? 정도로 이해함)

• 이 둘의 트리를 결합해서 렌더트리를 만들고 레이아웃 작업을 통해 화면에 그려줄 영역을 계산하고 뿌려준다.

• 위 과정중 자바스크립트를 만나면 자바스크립트 런타임 환경에 컨트롤을 넘기고 결과값을 받는다. DOM파싱은 중단.

(기본적으로 크롬이나 익스플로러 같은 브라우저가 HTML파일을 렌더링하는 구조로 나가다가 JS파일을 만나면 걔한테 일임하고 결과값만 받아오는?? 브라우저가 화면을 띄울때 자바스크립트 파일이 돌아가서 읽은 후에 결과값을 받아서 화면에 출력하는 그런 구조인것같다.)

• 생성된 DOM 노드의 레이아웃 수치가 변경될 시에 영향을 받은 모든 노드의 수치를 재계산하여 렌더트리를 재생성한다.

이 과정을 reflow라고 하고 재생성된 렌더트리를 다시 그리는것이 repaint 라고한다.

( css로 애니메이션을 만들때 이 부분을 주의해야한다고 들었다. 매 움직임마다 reflow가 일어날수도 있어서 레이아웃에 영향을 주는지 안 주는지 잘 계산해야 한다고 들었다.

아무튼 트리자체가 재생성되는것이 reflow, 다시 그리는것이 repaint)