아주 오래 전 과외하며 배웠던 내용들 리마인드하며 정리해보..자...
Browser
Browser는 x축 y축으로 인식하며 HTML, Stylesheets를 해석 후 HTML 문서의 해석이 끝나면 DOM tree를 만들고, Stylesheets 문서의 해석이 끝나면 스타일 규칙을 만든다.
DOM tree와 스타일 규칙을 합쳐서 Render tree 생성, 기본적으로 최초 한번 실행이 되고 이후 요소들의 레이아웃에 영향을 주는 변화가 생기면 다시 Render tree를 구성 이 때, reflow가 수행되어 각각 요소들의 레이아웃을 위치 시킴. Render tree가 탐색 되고 paint method가 호출 되어 UI 기바느이 구성요소를 사용하여 그림. 수정사항이 생기면 Repaint 수행
Repaint [지오메트리 계산 / HTML정의]
지오메트리 계산(calcurator) 생성된 DOM 노드의 레이아웃 수치 변경 시 영향받은 모든 노드의 수치를 다시 계산(Recalculate), 렌더 트리를 재생성하는 과정 Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는 과정
Repaint [Fragment Fill / css정의]
Reflow가 발생하면 자연히 Repaint가 발생 하지만 Reflow과정이 생략된 과정이 발생할 수도 있음
수업 들을 때 일단 적고 정리하자라는 마음으로 혼자만 알아들을 수 있게 정리하는 사람 그게 바로 접니다...
댓글