브라우저 작동 원리 간단 정리

브라우저 작동 원리

1. DOM 트리 생성

   HTML 받을 시 DOM 노드 트리 생성

   각 노드는 각 HTML 과 연관

2. Render 트리 생성

   외부 CSS 파일과 각 엘리먼트의 inline 스타일 파싱해 DOM 트리와 병합하여 새로운 DOM 트리 생성

   • attachment

     Webkit 에서 노드의 스타일을 처리하는 과정

     동기적 작업이라고 함

     DOM 트리에 노드 변경사항 생길 시 그 노드의 attach 메소드 실행

     각 요소들의 스타일 계산되고 그 과정에서 다른 요소들의 스타일 속성 참조

     attach : 스타일 정보 계산하여 객체 형태로 반환하는 메서드(모든 노드들에 있음)

3. Render tree Layout

   각 노드들의 스크린 좌표와 정확히 어디 나타날 지 위치 부여

4. Painting

   각 노드들 정해진 스타일 및 위치값대로 화면에 배치

   paint() : 노드에 색을 입히는 메서드