토큰화를 통해 인지된 토큰들은 트리 생성자로 넘어하고 그 다음 토큰을 확인하기 위해 다음 문자를 확인하며 이 과정이 입력의 마지막까지 반복됨
트리 구축
토큰화 예제
초기 상태 => 자료 상태
'<'를 만나면 => 태그 열림 상태
a-z까지의 문자를 만나면 시작태그 토큰 생성 => 태그 이름 상태
'>' 를 만날때까지 태그 이름 상태 유지 -> HTML 토큰 발행 -> 다시 자료 상태
'/' 를 만나면 태그 열림 상태 이후 종료 태그 토큰 생성 => 태그 이름 상태 '>' 만날때까지 유지 -> 종료 태그 토큰 발생 -> 다시 자료 상태
이 과정이 반복
트리 구축 알고리즘
파서가 생성되면 문서 객체가 생성됨
토큰화 -> 발행된 토큰들은 트리 생성자에 의해 처리됨
아직 종료 태그를 만나지 못하고 열린 상태의 태그들은 스택 (임시버퍼저장소)에 추가
스크립트
웹 = 파싱과 실행이 동시에 수행됨 (동기화 모델)
<script>를 만나면 즉시 파싱하고 실행되며 스크립트가 실행되는 동안 문서 파싱이 중단됨
스크립트가 외부에 있는 경우 네트워크를 통해 자원을 가져오는데 이 경우 실시간으로 처리되고 자원을 받을 때까지 파싱이 중단됨
스크립트를 defer로 표시하면 문서 파싱이 중단되지 않고 문서 파싱 이후 스크립트가 실행됨
HTML5는 스크립트를 비동기로 처리하는 속성을 추가함
렌더 트리
DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
요소들을 어떤 순서와 구성으로 내용을 그려낼지에 대한 규칙을 만드는 것
브라우저의 렌더러는 CSS 명세에 따라 노드를 표시하는데 이때 노드의 너비, 높이, 위치와 같은 기하학적 정보를 포함한다
노드 박스는 display 속성의 영향을 받는다
head와 같은 비시각적 돔 요소는 렌더 트리에 추가되지 않고, display:none; 이 할당된 요소는 트리에 나타나지 않는다. 즉, 브라우저 상에 아예 그 요소가 존재하지 않는 것! 그러나 visibility: hidden인 경우는 요소가 트리에 있지만 브라우저 상에서 보이지만 않는 것이기 때문에 요소가 자리 차지를 하고 있다고 생각하면 된다.
float이나 position absolute 속성처럼 트리의 동일한 위치에 랜더링 되지 않는 요소는 우저에 렌더링 될 때에는 흐름에서 벗어나 다른 곳에 배치된 상태로 그려지지만 자리 표시자는 원래 위치에 배치된다.
스타일
랜더 트리를 구축할 때 랜더 객체의 시각적 속성에 대한 계산은 각 요소의 스타일 속성을 계산하여 처리 -> 스타일 시트 + 인라인 스타일 등의 속성들은 CSS 스타일 속성을 변환됨
브라우저마다 최초의 스타일 시트를 제공함
스타일 시트의 다단계 순서
스타일 속성 선언은 여러 시트에서 나타낼 수 있고, 하나의 시트 안에서도 여러번 나타날 수 있어서 적용 순서가 매우 중요하다
cascade
사용자 중요 선언 > 저작자 중요 선언 > 저작자 일반 선언 > 사용자 일반 선언 > 브라우저 선언
배치 (=리플로)
트리에 추가할 때 위치 정보를 계산하는 것
HTML은 흐름 기반 배치 모델 사용 -> 흐름 속에서 왼 -> 오 , 위 -> 아래로 흐르며 앞서 등장한 요소가 후에 나타난 요소의 위치와 크기에 영향을 미치지 않음 (표 예외)
최상위 렌더러의 위치 = 0,0
모든 렌더러는 배치 또는 리플로 메소드를 갖는다
배치의 방식
전역 배치 : 렌더 트리 정체에서 일어날 수 있는 것으로 모든 렌더러에 영향을 주는 전역 스타일 변경, 화면 크기 변경 등에 의한 결과를 나타낼 때 일어난다 = 동기
점증 배치 : 런더러가 더티 (다시 배치할 필요가 있는 요소 또는 추가된 것과 그 자식) 일대 비동기적으로 일어남 = 비동기
최적화
전역 배치를 해야하는 경우 렌더러의 크기를 다시 계산하지 않고 캐시로부터 가져옴
과정
부모 런더라가 자신의 너비 결정
부모가 자식을 검토 -> 자식 렌더러를 배치(x,y 결정)하고 필요시 자식 배치를 호출하여 자식 높이 계산
부모는 자신의 누적된 높이와 여백 패딩을 사용하여 자신의 높이설정 -> 이 높이 값은 부모 렌더러의 부모 (즉 현 상태에서는 할머니)가 사용
더티 비트 플래그 제거
웹킷의 너비 계산하기
availableWidth = contentWidth = clientWidth() - paddingLeft() - paddingRight() (즉, 클라이언트 넓이의 패딩을 팬 리얼 컨텐츠만의 너비로 객체의 테두리, 스크롤바를 제외한 내부 영역)
컨테이너 너비 = 0~avaliableWidth 중 최대값 -> 백분율인 경우 절대값으로 변환
스타일 요소 중 width 속성 값
너비가 고정된 경우 그 값은 캐시에 저장
그리기
화면에 표시할 내용이 담긴 렌더 트리를 탐색하고 렌더러의 paint 메소드 호출
그리기 방식
전역
점증 : 전체 트리에 영향을 주지 않은 방식으로 변경된 일부 렌더러가 화면 위의 사각형을 무효화하여 몇 개의 영역을 하나로 합쳐서 처리
그리기 순서 = 블록 렌더러가 쌓이는 순서
배경 색
배경 이미지
테두리
자식
아웃라인
렌더링 엔진의 스레드
통신을 제외한 거의 모둔 경우 단일 스레드로 동작
통신의 경우 보통 2-6개의 병렬 스레드로 진행
CSS2 시각 모델
캔버스 = 서식 구조가 표현되는 공간, 브라우저가 내용을 그리는 공간
그 면적은 무한하지만 브라우저는 뷰포트의 크기를 기반으로 초기 너비를 결정
기본적으로 투명하기 때문에 다른 캔버스와 겹치는 경우 비쳐 보이고
투명하지 않은 경우 브라우저에서 정의한 색이 지정됨
CSS 박스모델
문서 트리에 있는 요소를 위해 박스 생성
시각적 서식 모델에 따라 배치된 사각형 박스를 설명함
각 박스의 구성 요소 : 콘텐츠 영역, 선택적 padding, border, margin
각 노드는 0-n개의 상자로 만들어짐
모든 상자들은 유형이 있는데 이를 display 속성이라고 함 : block, inline, none
위치 결정 방법 (position 속성 또는 float 속성)
normal : 문서 내 위치에 따라 결정, 렌더 트리에 의존
float : 일반적인 흐름의 배치를 먼저 한 뒤 왼쪽 또는 오른쪽으로 흐러 이동
absolute : 이 객체는 DOM 트리와 다른 렌더 트리에 놓임
static(디폴트), relative = 일반적인 흐름에 따라 위치 결정
absolute, fixed = 절대적 위치
relative, absolute, fixed를 사용하면 top, bottom, left, right로 속성 위치 결정할 수 있음
