1. HTML 파싱 -> DOM 트리 생성
HTML -> HTML Parser -> DOM Tree
브라우저가 html파일을 렌더링 하는 경우
브라우저에 사이트 주소를 입력하면, 주소에 있는 서버가
약속된 html 파일을 브라우저로 전송
이때, 전송받는 html코드는 8비트 데이터 형태로 전송 (바이트 스트림)
- 전송받은 바이트를 문자로 전송
- 가지고 있는 토큰과 비교하여 해당 문자가 html 코드인지 확인 (토큰화)
토큰: 브라우저에 저장되어 있는 html의 시작 혹은 종료 태그, 속성과 속성값 등 약속된 여러가지 값 - 토큰화과정을 통해 노드가 생성된다
노드: Dom 트리를 이루는 거대한 구조의 한 단위
Dom 트리 link, image 노드에 다운로드 표시가 있는데 이 표시는 브라우저가 Dom 트리를 생성할 때 링크와 이미지와 같은 태그를 만나게 되면 해당 태그 안 명시되어 있는 리소스를 다운로드 받는다.
script 노드를 만나게 되면 브라우저는 Dom 생성을 중단하고 script 태그 안 자바스크립트 코드를 해석하게 된다.
2. CSS 파싱 -> CSSOM 트리 생성
CSS -> CSS Parser -> CSSOM Tree
- 브라우저로부터 전달받은 css파일을 문자로 해석
- 가지고 있는 토큰과 비교
- 비교 후 노드 발행
- 이러한 노드들이 모여 거대한 하나의 css object모델 cssom tree 생성
3. 렌더 트리 생성
생성된 Dom 트리와 cssom 트리를 합쳐 렌더 트리 생성
4. 레이아웃 (리플로우)
렌더트리 배치
Dom과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리 생성
css 속성 중 display:none;과 같은 속성이 적용된 요소는 렌더트리 안에 포함되지 않는다.
5. 페인트 (리페인트)
렌더트리를 따라서 페인트 기록생성
페인트 기록: 요소를 렌더링하는 순서, 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈다음 그 위에 텍스트, 색, 이미지, border, 그림자등 시각적인 부분을 그리는 작업 진행
6. Composite
페인트 단계에서 만든 여러가지 레이어를 스크린에 픽셀로 표현, 나누어져 있던 레이어들을 하나로 합성해 페이지를 완성한다.
css 속성을 이용하여 레이아웃이 변경되게 되면 렌더트리를 다시 생성하고 레이아웃 단계 다음 페인트 단계도 다시 실행
리플로우와 리페인트가 반드시 순차적으로 동시 실행되지 않는다
css 속성 중 transform, opacity는 리플로우, 리페인트 생략할 수 있다
