브라우저에 "www.google.com" 주소를 입력하면
1. 웹 브라우저는 DNS서버에 해당 도메인의 IP주소를 요청하게 된다.
2. DNS 해석기는 해당 요청을 일정 기간 캐싱하여 동일한 요청에 대한 빠른 응답을 대비하기 때문에 (Time to live, TTL)
캐싱된 데이터가 있다면 DNS서버에 요청하지 않고 바로 IP주소를 반환한다.
3. DNS서버로부터 받은 IP주소를 이용하여 HTML, CSS, JS 문서 등을 다운로드 받는다.
4. 브라우저의 렌더링 엔진이 HTML문서를 파싱해 DOM트리를 구축하고 CSS문서를 파싱해 CSSOM트리를 구축한다.
5. DOM트리와 CSSOM트리를 합쳐 렌더 트리를 구축하고 레이아웃을 통해 요소의 위치와 크기를 계산한 후에 페인팅을 통해 브라우저에 나타나게 된다.
6. 그 과정에서 script 태그를 만나면 JS에서 요소를 변경시킬 수 있기 때문에 렌더링 엔진은 JS엔진에게 제어권을 넘긴고 기다린다.
그래서 DOM트리 구축 전에 JS에서 요소를 탐색하거나 변경하려하면 오류가 발생한다.
<body>태그 아래에 <script>태그를 쓰는 이유다.
6. 만약 스크립트를 통해 DOM 요소의 조작이 일어나면 필요한 부분을 계산해 렌더 트리를 수정하고, 리플로우, 리페인트의 과정을 거쳐 다시 화면을 출력한다.
요소의 크기나 위치의 변경 없이 background-color, visibility 등의 스타일 변화만 있는 경우에는 리페인트만 발생한다.
리플로우와 리페인트의 발생을 최적화하는 것이 사용자 경험을 향상시키는 데에 도움이 된다.
'개념정리' 카테고리의 다른 글
| 쿠키와 세션의 특징 (1) | 2023.10.31 |
|---|---|
| attribute와 property의 차이 (0) | 2023.10.31 |
| CSR과 SSR의 차이점과 특징 (0) | 2023.10.31 |
| CORS? Cross-Origin-Resource-Sharing에 대해 (0) | 2023.10.31 |