렌더링
-
브라우저 렌더링 : reflow & repaintCODING/HTML & CSS 2018. 12. 19. 16:43
렌더링 과정1) DOM 트리 생성2) 스타일 구조체 생성3) 렌더 트리 생성4) 레이아웃 처리5) Paint6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업1234function reflow() { document.getElementById('test').style.width = '100px'; return false;}Colored by Color Scriptercs repaintReflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업.수치와 상관없는 background-color, visibillty, outline..