🌐 브라우저란?
- 인터넷을 통해 웹 서버에 있는 정보를 볼 수 있는 소프트웨어 응용 프로그램
🪄 렌더링이란?
- 서버로 부터 HTML, CSS, JS 등의 파일들을 받아 브라우저에 뿌려주는 과정
⚙️ 브라우저 렌더링 과정
1. 사용자가 주소창에 접속하고자 하는 URL을 입력
2. URL의 IP 주소를 찾기 위해 캐시에서 DNS 기록 확인
DNS(Domain Name System)
- DNS는 할당된 도메인 영역에 대한 정보를 가지고 있는 서버로, 주로 도메인을 IP주소로 변환하는 역할을 한다.- 브라우저는 이전에 방문한 웹사이트에 대해 일정 기간 동안 DNS 정보들을 저장한다.
3. 캐시에 없으면 ISP의 DNS 서버를 통해 URL을 호스팅하는 서버의 IP 주소 찾기 실행
4. 브라우저가 서버와 TCP 연결 시작
5. 브라우저가 웹 서버에 HTTP 요청 보냄
6. 서버가 요청을 처리하고 HTTP 응답 보냄
7. 사용자가 서버로부터 HTML, CSS, JS 등 필요한 리소스를 다운로드 받음
8. HTML을 파싱하여 DOM 트리 생성
9. CSS를 파싱하여 CSSOM 트리 생성
10. JS를 파싱하여 AST를 만들고 바이트 코드로 변환하여 실행
JS는 DOM, CSSOM 트리에 접근할 수 있는 DOM API가 있다.이미 파싱된 DOM 트리나 CSSOM 트리를 변경할 수 있다.
11. 렌더링 트리 생성
12. 화면에 나타나는 레이아웃 크기와 위치를 정하고 픽셀로 변환
13. 화면에 요소를 그리는 '페인트' 작업 실행
