브라우저가 화면을 렌더링하는 과정을 알기 위해서 몇 가지 개념을 알고 넘어가야 한다!
🐧 DNS
- Domain Name System
- 인터넷에서 도메인 이름을 IP 주소로 변환하는 시스템
- 사용자가 웹 사이트의 도메인 이름을 입력하면, 브라우저는 DNS 서버에 도메인 이름을 전송하여 해당 도메인에 대한 IP 주소를 얻는다. 이후 브라우저는 IP 주소를 사용하여 웹 서버와 통신하여 웹 페이지를 가져온다.
🐧 DOM
- Document Object Model
- 문서의 구조화된 표현으로 Java Script를 통해 문서를 동적으로 조작할 수 있게 한다.
- 문서를 트리 구조로 표현하여 각 요소를 객체로 나타내는데, 이를 통해 Java Script와 같은 스크립트 언어를 사용하여 문서의 내용, 구조, 스타일 등을 동적으로 조작하고 변경할 수 있다.
🐧 CSSOM
- CSS Object Model
- CSS 스타일 시트의 정보를 추출하여 Java Script를 통해 문서의 스타일을 동적으로 변경할 수 있게 된다.
- DOM과 유사하게 CSSOM은 문서의 스타일 정보를 계층 구조로 표현하여 각 요소의 스타일 정보를 접근하고 조작할 수 있도록 한다.
- Java Script와 같은 스크립트 언어를 사용하여 동적으로 스타일을 변경하거나 애니메이션을 적용할 수 있다.
브라우저 렌더링 과정
- 주소창에 입력된 주소를 통해 서버를 찾아간다.
- 이후 DNS가 연결해줄 곳을 찾는다. 👉 실제 서버
- 서버에서 HTML 파일을 클라이언트로 보낸다.
- HTML 문서는 파싱되어 DOM을 생성한다. 👉 객체 형식
- 중간에 css를 로드하는 link 혹은 style 태그를 만나면 DOM 생성을 중지
- CSS를 파싱하고 CSSOM을 생성
- 이 과정을 통해 만들어진 DOM과 CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌터 트리로 결합
- 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단
- 이후 JS 엔진을 실행하고 JS코드를 파싱
자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 한다.
리플로우: 레이아웃 계산을 다시 하는 것리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것
script 태그를 만날 때마다 파싱이 중단되는 문제를 script 태그 뒤에 async 혹은 defer를 붙여줌으로써 해결할 수 있다.
async: HTML 파싱, JS 파일 로드가 동시에 진행defer: DOM 생성이 완료된 직후, JS의 파싱과 실행이 진행된다.
여기서 추가로! 이걸 정리하는데 수연이 언니가 Virtual DOM과 Real DOM의 차이에 대해 물어봤다. 그래서 추가로 정리해 본다,, 😊,,
🐧 Real DOM
브라우저가 HTML 문서를 파싱하여 생성하는 실제 DOM 구조. HTML 문서의 각 요소는 브라우저의 메모리에 객체로 표현되며, DOM 트리 구조를 형성한다. Real DOM은 웹 페이지의 구조와 내용을 동적으로 조작할 수 있는 강력한 기능을 제공한다.
그러나 DOM 요소의 추가, 수정, 또는 삭제 시에 브라우저에서 해당 변경사항을 반영하기 위해 재계산과 재렌더링이 필요하다.
🐧 Virtual DOM
웹 애플리케이션의 상태 변경 시 실제 DOM을 직접 수정하는 대신, 변경 사항을 Virtual DOM에 적용한다. 이후 Virtual DOM은 변경 사항을 실제 DOM에 적용하기 전에 이전 상태의 Virtual DOM과 현재 상태의 Virtual DOM을 비교하여 필요한 최소한의 변경 사항을 계산한다. 그리고 변경 사항을 실제 DOM에 일괄 적용하게 된다. 이를 통해 최소한의 DOM 조작으로 렌더링 성능을 향상시킬 수 있다.
hello, world!