반응형 렌더링2 브라우저 렌더링과정 1.DOM 트리 구축 하나의 html 페이지는 div, span등 각각의 요소를 가진다. 각 요소는 하나하나의 노드로 설정이 되어 트리 형태로 저장된다. 이를 DOM트리라고 한다. 예를들어 div > span, span 이라는 요소가 있다면 div라는 부모노드 밑에 span이라는 자식노드가 2개 생기는 것이다. 2.렌더트리와 렌더레이어 생성 각각의 노드는 CSS파서에 의해 정해진 스타일 규칙이 적용되어 있다. ex) span.color = 'red'는 노드 색깔이 빨간색이다. 이런 규칙에 따라 CSSOM트리가 만들어지고 미리 만들어놓은 DOM 트리 내에 있는 노드와 함께 렌더객체가 생성되며 이들이 모여 병렬적인 렌더트리가 생성된다. 이때 display:none이 포함된 노드는 지워지고 font-size등.. 2022. 6. 27. 브라우저 렌더링 원리 브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS.. 2022. 4. 7. 이전 1 다음 반응형
