렌더링(Rendering) : HTML-CSS-Javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정
브라우저의 렌더링 과정은 아래와 같다.
1. 서버로 부터 받은 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받는다.
2. HTML를 DOM, CSS를 CSSOM으로 생성한다.
3. Render Tree를 생성한다.
4. Layout을 계산한다. (Viewport내에서 각각의 노드들의 위치를 계산한다)
5. Paint한다. (요소들을 화면에 그린다)
위 단계를 거쳐 우리가 보는 웹페이지를 만들어낸다.그런데 단순히 이해하기엔.. Layout이나 Paint는 대충 예상이나 가지만 나는 DOM도, CSSOM도 Render Tree 몰?루
그래서 개념을 정리하고자, 나와 같은 사람들이 또 있을까 해서 글을 쓴다.
1. DOM (Document Object Model)
HTML파일은 단순한 텍스트임으로 컴퓨터가 연산, 관리하기 쉽도록 Object Model로 만들어 낸 것을 DOM(Document Object Model)이라고 한다.
HTML파일이 DOM으로 만들어 지는 과정은 다음과 같다.
1️⃣ 변환 (Conversion) : 브라우저가 네트워크에서 HTML의 원시 바이트(Bytes) 를 읽고 문자열로 변환한다.
("<html><head>...</head><body><p>Hello<span>web performance</span>...</html>")
2️⃣ 토큰화 (Tokenizing) : 브라우저가 문자열을 고유 토큰으로 변환한다. HTML5에서 지정한 태그형태 텍스트 자체로 변환한다고 이해할 수 있다. 각 태그별로 의미가 있고 고유한 규칙이 있다.
("<html>", "<body>" ,"<span>"... )
3️⃣ 렉싱 (Lexing) : 토큰을 객체로 변환한다. 객체는 property, value 등을 가질 수 있는 규칙을 가진 Object 라고 볼 수 있다.
4️⃣ DOM 생성 (DOM construction) : HTML에서 각 태그간의 관계를 정의한 내용을 기반으로 렉싱된 객체들을 트리 데이터 구조 내에서 연결시킨다.
2. CSSOM (CSS Object Model)
DOM과 동일한 과정을 통해 바이트->텍스트->토큰-> 객체-> 트리 데이터 구조로 CSS파일을 Object Model로 만든 것을 CSSOM이라고 한다.
DOM과 비슷해 보이지만 각 객체가 지닌 스타일 속성에 대한 값들이 트리 구조로 연결된 것을 확인할 수 있다.
3. Render Tree
Dom Tree와 CSSOM Tree를 이용하여 Render Tree를 만든다. 모든 요소들의 구조와 텍스트가 존재하는 위 두가지 tree들과는 달리 Render Tree는 실제 화면에 표현되는 노드들로만 구성된다.
조금 더 자세하게 보면 알겠지만 CSSOM의 span 요소를 보면 display:none 속성이 설정되어 있다.
해당 속성이 반영된 Rener Tree를 보면 span요소가 제외된 것을 알 수 있다.
visibility: invisible은 눈에 보이지 않지만 공간을 차지 하고 있는 반면
dispaly : none은 요소 자체가 웹브라우저에서 사라진 상태이다.
만약 CSSOM에 visibility : invisible이 span의 속성으로 설정되었다면 Render Tree에도 span이 포함되었을 것이다.
'Frontend > Web' 카테고리의 다른 글
| [Web] Vercel로 무료 배포하기 (+ .env 파일 환경변수 등록하기) (1) | 2024.04.17 |
|---|---|
| 브라우저 렌더링(Rendering) 과정 (0) | 2023.09.09 |