Web 프로그래밍/Javascript
[Javascript HighPerformance] Reflow, Repaint
브라우저가 페이지의 구성요소 전체(Html, Javascript, CSS)를 내려받으면 기본족으로 내부적인 데이터 구조 두가지를 만든다 DOM 트리 : 페이지 구조를 나타내는 것 렌더트리 : DOM 노드를 어떻게 표시할 지 나타내는 것 렌더트리는 DOM트리 노드 중 표시할 모든 노드에 대해 적어도 하나의 노드르 만든다. 렌더트리에 있는 노드는 페이지 요소를 마진, 패딩, 테두리, 포지션등 박스로 취급하는 CSS모델과 연관해서 프레임 또는 박스로 불린다. DOM 트리와 렌더트리를 다 만들면 브라우저는 페이지 요소를 표시(페인트) 할 수 있다. DOM이 완료가 되고 그 후에 DOM이 변경 되면 브라우저는 변경된 요소에 대해 구조, 위치, 디자인 등 다시 계산하여 DOM에 적용을 한다. 이러한 과정을 Refl..
2016. 6. 9. 14:47