Knowledge
렌더링(Rendering) 개념
자라나라나무나무나
2022. 2. 26. 02:21
렌더링(Rendering)
화면에 표시할 웹 페이지를 만드는 과정
렌더링 과정
1. HTML을 구조별로 분류하여 DOM객체를 생성
2. CSS를 구조별로 분류하여 스타일규칙 생성
3. DOM객체, 스타일규칙을 합쳐서 렌더트리(화면) 생성
4. 렌더트리를 기준으로 레이아웃배치, 스타일 작업
세부적인 렌더링 과정
1. Loader가 서버로부터 HTML을 불러옴
2. HTML을 Phasing(파싱/분류)하여 DOM트리를 만든다.
3. CSS파일과 스타일요소를 Phasing하여 CSSOM트리를 만든다.
4. DOM트리와 CSSOM을 결합하여 렌더링트리를 만든다.
5. 렌더링트리의 요소들의 크기와 위치를 계산한다.
6. 계산된 크기와 위치에 맞게 화면에 출력한다.
참고