브라우저 렌더링 과정
1. HTML파일을 파싱해서 DOM 트리를 생성한다.
2. CSS파일을 파싱해서 CSSOM트리를 생성한다.
3. 생성된 DOM트리와 CSSOM트리를 합쳐서 렌더 트리를 생성한다. (display: none 같은 경우 렌더 트리에 포함되지 않는다.)
4. 레이아웃 단계에서 렌더 트리의 각 요소의 크기와 위치를 계산해서 화면에 배치한다.
5. 페인트 단계에서 배치된 요소들을 화면에 그린다.
기본적으로 알던 일련의 브라우저 렌더링 과정에 대한 설명
좀 더 세분화해서 보면
1. DOM트리 생성
HTML의 원시 바이트를 읽는다. (8비트의 데이터 형태, 바이트 스트림) ->
HTML에 정의된 인코딩(ex. utf-8)에 따라 개별 문자로 변환 ->
변환한 문자와 가지고 있는 토큰을 비교해 HTML코드인지 확인 (토큰, HTML의 시작, 종료 태그 등 약속된 값) ->
토큰화를 통해서 노드 생성 (ex. <html>, <head>, <body>등의 태그는 각각의 노드로 변환)->
노드들이 계층 구조를 형성하여 DOM트리를 생성, DOM 트리는 HTML 문서의 구조를 계층적으로 표현한다.
2. CSSOM트리도 위와 같은 과정을 거쳐서 CSSOM트리를 형성한다.
CSS 파일도 원시 바이트를 읽는다.
CSS 문법에 따라서 토큰화 과정을 거친다. (ex. 선택자, 속성, 값 등을 각각의 토큰으로 변경)
토큰화된 CSS는 파싱 과정을 통해서 각 규칙을 정의하는 객체 모델로 변환된다.
객체 모델들이 모여 CSSOM 트리를 형성, CSSOM 트리는 CSS 스타일 규칙의 계층 구조를 표현한다.
3. 생성된 DOM트리와 CSSOM트리를 합쳐서 렌더 트리를 생성한다.
display: none과 같은 속성은 렌더 트리에 포함되지 않기 때문에 스크린 리더가 읽지 못 한다. (접근성에 좋지 않음)
렌터 트리는 각 노드의 스타일 계산을 포함한다.
4. 레이아웃 단계에서 렌더 트리의 각 요소의 크기와 위치를 계산해서 화면에 배치한다.
5. 페인트 단계에서는 앞서 만들어진 렌더 트리를 따라서 페인트 기록이 생성되는데, 요소를 렌더링하는 순서와 지금까지의 정보를 바탕으로한 페이지를 여러개의 레이어로 나누어 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적 요소를 그린다.
6. 컴포지팅 단계에서는 페인트 단계에서 나누어진 레이어들을 스크린에 픽셀로 표시하고 레이어를 하나로 합성하여 페이지를 완성한다.
댓글