브라우저 - 렌더트리를 보여준다.
렌더트리 - DOM + CSSOM ( 스타일 적용 )
스타일 적용후, 화면에 보이지 않는 부분은 렌더트리에서 제외된다.
- display : none 스타일이 적용된 element는, 렌더트리에 포함되지 못한다.
- visibility : hidden 스타일이 적용된 element는, 렌더트리에 포함되어 실제화면에서 공간을 차지한다.
DOM이란?
Document Object Model, 문서 객체 모델
HTML의 여러 구성요소(노드)에서 유효한 것만 선택해, 트리 형식으로 구성한 표
DOM안의 모든 것들은 객체 ( 클래스로 만들어진 것, Node 라고 부름 )
ex) <a>, <h1>, "Text" ...
렌더링이란?
[웹] 렌더링(Rendering)이란?
렌더링이란? 서버에서 HTML 파일을 받아 브라우저에 표시하는 과정 렌더링과정 1. HTML을 구조별로 분류하여, DOM 객체를 생성. 2. CSS를 구조별로 분류하여, 스타일 규칙 생성. 3. DOM 객체, 스타일 규
defineall.tistory.com
Virtual DOM이란?
DOM을 나눠서 분리해서 여러개의 가상DOM으로 만들어 놓은 것
변경 사항을 DOM에 직접 적용하지 않고, 가상DOM에 적용한후, DOM에 적용했다.
- 가상DOM에 변경 사항 한번에 모음 (버퍼링)
- DOM과 가상DOM비교
- 차이점이 있는 부분만 변경
- 렌더링
Virtual DOM 사용 예시
10개의 <li>태그 변경
DOM <li>1개 바꾸고, 10번 렌더링
Virtual DOM <li> 10개 바꾸고, 1번 렌더링
* 렌더링 수를 확연하게 줄일 수 있다.
반응형
