1.DOM 트리 구축 하나의 html 페이지는 div, span등 각각의 요소를 가진다. 각 요소는 하나하나의 노드로 설정이 되어 트리 형태로 저장된다. 이를 DOM트리라고 한다. 예를들어 div > span, span 이라는 요소가 있다면 div라는 부모노드 밑에 span이라는 자식노드가 2개 생기는 것이다. 2.렌더트리와 렌더레이어 생성 각각의 노드는 CSS파서에 의해 정해진 스타일 규칙이 적용되어 있다. ex) span.color = 'red'는 노드 색깔이 빨간색이다. 이런 규칙에 따라 CSSOM트리가 만들어지고 미리 만들어놓은 DOM 트리 내에 있는 노드와 함께 렌더객체가 생성되며 이들이 모여 병렬적인 렌더트리가 생성된다. 이때 display:none이 포함된 노드는 지워지고 font-size등..

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버(구글)라는 화면이 나타나게 된다. 또한 이러한 과정이 캡슐화, 비캡슐화 과정을 거쳐서 이뤄지게 된다. - 대기열 브라우저는 주소창입력에 대한 요청을 대기열에 넣는다 - 캐싱 캐싱은 요청된 값의 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술 이는 공유프록시캐시와 브라우저 캐시로 나눠진다. - 브라우저 캐시 브라우저캐시는 쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 사용자가 HTTP를 통해 다운로드하는 모든 문서를 보유하는것을 말한다. 어떤 사이트를 갔다가 다시 방문하면 빠르게 컨텐츠가 나타나는것이 브라우저 캐시의 역할이다. 인터넷 사용기록을 삭제하고 싶어..

브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS..