반응형 DOM2 Virtual DOM(가상돔) Virtual DOM 1.브라우저의동작 DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성 Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정 Paint (repaint) : 실제 화면에 그리기 문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것 2.Virtual DOM의 등장 SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김, 그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다. DOM 의 사본, 복사본이라고 할 수 있다. 진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 ap.. 2022. 4. 7. 브라우저 렌더링 원리 브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS.. 2022. 4. 7. 이전 1 다음 반응형
