안녕하세요.
Hynn 입니다.
이번 포스팅에서는 브라우저 랜더링의 대한 과정과 단계를 제 기준으로 정리하고, 남겨두는 포스팅입니다.
관련 내용을 보시는분들은 참고하시는 것도 좋을 것 같습니다.
먼저 대략적으로 그림으로 표현한 단계는 아래와 같습니다.
다만 그림의 순서가 항상 맞지는 않습니다. 고정적 부분과, 가변적 부분을 나누어 작성해보겠습니다.
먼저 이를 글로 풀어서 작성하면 다음과 같습니다.
1. 요청
당연히 브라우저 랜더링의 첫번째는 "요청" 입니다.
어느 브라우저든 "요청"을 받아야 랜더링이라는것을 하겠죠?
그렇기때문에 먼저, 어떠한 경로로던지, 브라우저는 "요청"을 해야 합니다.
2. 응답
요청을 했으면, 당연히 응답을 할 겁니다.
응답은, HTML,CSS, JavaScript 와 같은 문서를 응답받게 됩니다.
이제 랜더링을 위한 사전 준비가 끝났다고 볼 수 있습니다.
3. HTML/CSS Parsing
이제 응답으로 받은 HTML,CSS 를 파싱합니다. 파싱을 하면 다른 포스팅에서 언급했던 DOM Tree 를 생성합니다.
DOM Tree 는 어려운 것이 아니라 아래와 같은 예시를 뜻합니다.
<body>
<header></header>
<main></main>
<footer></footer>
</body>CSS 역시도, HTML 을 파싱하게되면 DOM Tree 를 생성하는것처럼, CSSOM 이라고하는 CSS를 위한 DOM 이 존재합니다.
기본적으로 아래의 처리로 이루어집니다.
먼저 HTML을 파싱하다가 link,style 태그를 만나게 되면 CSSOM의 파싱을 시작합니다.
하지만 CSSOM 이 파싱이 완료되는 동안, 랜더링을 처리하지 않고 랜더링을 차단하게 됩니다. 하지만 HTML 은, JavaScript 를 만나게되면, HTML 파싱을 중단하고, JavaScript를 다운로드, 파싱, 실행합니다. 당연하게도 JavaScript 는 HTML, CSS 모두에게 영향을 미치기 때문에, 아래의 요약사항을 따라야 합니다.
- CSSOM 이 구축이 완료되기 전까지는, JavaScript 는 CSSOM이 완료될 때 까지 기다립니다.
- HTML은 파싱 중 Link, style 태그를 만나면 CSSOM 의 구축 및 파싱이 시작됩니다. HTML 파싱이 중단되지 않습니다.
- HTML 은 JavaScript 을 만나면 파싱이 중단됩니다.
즉, 이를 설명한다면 아래의 핵심사항이 존재합니다.
먼저 , 응답이 오면, HTML을 파싱합니다. 이때, link, Style 을 만나면,C SS 가 파싱됩니다.
HTML 에서 JavaScript 를 만나면, HTML 파싱은 중단되고, CSS는 CSSOM 을 처리합니다. 그리고 JavaScript 는 CSSOM 을 기다립니다.
그리고, CSSOM 가 구축이 완료되면, 나머지 파싱이 처리됩니다.
4. 랜더 트리 생성 ( Create Render-Tree )
이제 위에서 파싱이 완료된 DOM, CSSOM 의 트리가 합쳐져서 랜더 트리가 생성됩니다.
5. ReflowLayout (레이아웃)
이제 위에서 생성된 랜더트리를 사용하여, 페이지의 모든 요소(Element) 와 위치 (Locate) 크기 정보(Width,Height...) 를 결정합니다.
6. Paint (랜더)
이제 각 요소의 텍스트, 색상, 이미지, 테두리등을 화면에 그리기 시작합니다.
7. Compositing (합성)
이제 각 요소의 레이어를 합쳐서 최종 화면에 표시됩니다.
8. DOMContentLoadedEvent
이제 HTML 문서가 완전히 로드되고, 파싱되었을때, DOM 컨텐츠의 이벤트가 로드됩니다.
9. Load-Event
외부 리소스를 포함한 모든 리소스가 페이지에 로드되었을 때, 이벤트가 발생합니다.
10. Event-Listener & callback
사용자 상호작용 또는 이벤트에 따라 JavaScript 코드가 실행됩니다. 여기에는 클릭이벤트와 같은 상호작용이 포함됩니다. 또한 다른 이벤트에 반응하여 JavaScript 코드가 실행됩니다.
11. RequestAnimationFrame
애니메이션과 관련된 JavaScript 코드 실행이 스케줄링 됩니다.
감사합니다.
'개발공부일지 > etc' 카테고리의 다른 글
| IT정보 - macOS 내의 DS_Store 에 대하여 (0) | 2022.11.24 |
|---|
댓글