DOM, CSSOM 트리 구축 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기

파싱

• 텍스트를 읽어서 자바스크립트가 이해할 수 있는 문법으로 쪼개서 이해, 분석하는 과정

랜더링

• 브라우저에 시각적으로 출력하는 것

브라우저 작동방식

서버는 브라우저로 요청받은 HTML 파일을 읽어드린후
-> 메모리에 저장하고
-> 그 메모리에 저장된 바이트를 응답한다
-> 바이트 형태의 문서를 meta태그의 charset 어트리뷰트에 지정된 인토딩방식(UTF-8)에 따라 문자열로 반환한다
-> (문자열로 변환된 HTML문서)를 이번에는 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해한다
-> 토큰들의 내용에 따라 객체로 변환하여 각 노드들을 생성한다
-> HTML은 요소 간의 부자 관계인 중첩 관계를 갖는데, 이를 반영하여 모든 노드들을 트리 구조로 구성하여 DOM을 만든다

CSS파싱, CSSOM 생성 과정

랜더링 엔진은 HTML 문서를 한줄 한줄 순차적으로 파싱하여 DOM을 생성한다
CSS를 로드하는 link태그 혹은 style태그를 만나면 DOM생성을 중지한 후 CSS 파싱 즉, CSSOM을 생성하는 과정을 진행한다

바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM (HTML의 파싱과정과 동일)

자바스크립트 파싱 과정

랜더링 엔진은 HTML 문서를 파싱하다 자바스크립트파일 즉 script 태그를 만나면 DOM 생성을 일시 중지한다

script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다

생성되지 않은 DOM을 조가한다면 에러발생
(body 요소 아래 또는 DOM 생성이 완료된 시점에서 자바스크립트가 실행되도록 한다)

토큰나이징
토크나이저가 자바스크립트 코드를 분석하여 문법적 의믜를 갖는 코드의 최소 단위인 토큰으로 반해하는 것

파서가 토큰을 구문분석하여 AST(Abstract Suntax Tree: 추상 구문 트리)로 파싱

파이트 코드 생성기가 AST를 바이트코드로 변환

인터프리터에 의해 바이트코드를 실행

렌더 트리 구축

DOM, CSSOM 트리 결합하여 렌더 트리 형성

화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용
픽셀을 화면에 그리는 페인트 과정에 사용

• DOM 트리의 루트부터 노드 각각을 모두 탐색한다
  • 이때 화면에 표시되지 않는 일부 노드들(script, meta 등)은 랜더 트리에서 제외된다
  • CSS 속성 중 display: none과 같은 화면에 숨겨지는 속성도 렌더 트리에 제외된다
• 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용
• 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 렌더 트리로 생성

랜더 트리 배치

랜더 트리 생성 후 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기 계산
모든 상대적인 값은 픽셀값으로 변환 (CSS 상대적인 값 %, rem, em, vh)

이과정을 Layout 또는 Reflow 라고 한다

렌더 그리기 (paint)

랜더 트리 형성 -> 렌더 트리 구축 -> painting -> 표시

렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 painting 메서드가 호출된다
painting 과정 후 브라우저 화면에 UI가 나타나게 된다

배경색 -> 배경 이미지 -> 테두리 -> 노드 -> 아웃라인

요약

즉,

html 파일을 파싱 하고 DOM 트리 형성
CSS 파일 파싱 하고 CSSOM 형성

DOM, CSSOM 트리를 결합하여 렌더 트리 구축 (script, meta 화면에 안보이는 테그 및 적용 안되는 css 제외)
위치 및 스타일

렌더 크리 배치 (노드의 정확한 위치, 크기 계산, 상대적인 값 픽셀로 계산)

렌더 그리기

async VS defer

script 태그에 async 또는 defer 설정을 주면 각각 다르게 script 파일을 로드한다

먼저 html 파일이 파싱되기 전에 script 태그를 만나게 되면 script에 동기적으로 지정된 것들이 없기 때문에 에러가 발생된다

async

async를 활용하여 js파일을 연결하게 되면 비동기적으로 실행되기 때문에 먼저 완료된 것 부터 실행된다

만약 동기적이나 순서가 보장되어야 한다면 async 설정을 사용하면 안된다

defer

defer 또한 비동기 적으로 동시에 진행되는데, html 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후에 진행된다

Reflow, Repaint

레이아웃 위치나 수치가 변하면 그에 영향을 받는 부모, 자식 노드는 Reflow 과정을 다시 수행 한다

화면의 구조가 변경되었을 때에는 Reflow와 Repaint 모두 발생

Reflow

요소들의 크기와 위치를 다시 계산하는 과정

DOM 추가, 제거, 위치, 크기 변경, CSS 애니메이션, 폰트, 텍스트, 이미지 크기, 계산된 스타일(offset, scroll), 페이지 초기 렌더링, 윈도우 리사이징

화면 주고가 변경되면 Reflow가 발생

Repaint

Reflow 된 렌더 트리를 다시 화면에 그려주는 과정

화면의 구조가 변경되지 않고, 스타일만 변경시 Repaint만 동작