Link
Notice
HIT해
브라우저 렌더링 과정 본문
728x90
브라우저 렌더링 과정
1. URL 입력 및 요청
- 사용자가 브라우저 주소창에 URL을 입력하고 Enter를 누르면, 브라우저는 해당 URL로의 접속을 시도한다.
2. DNS 조회
- 브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 조회를 요청한다.
- DNS 서버가 응답을 반환하면, 브라우저는 해당 IP 주소로 연결을 시도한다.
3. TCP 연결 및 HTTPS 핸드셰이크
- 브라우저는 서버와 TCP 연결을 설정하고, HTTPS를 사용할 경우 SSL/TLS 핸드셰이크를 통해 보안 연결을 설정한다. 이를 통해 데이터가 안전하게 전송될 수 있도록 한다.
4. HTTP 요청 전송
- 브라우저는 서버에 HTTP 요청을 전송하여 웹페이지의 자원을 요청한다.
5. 서버 응답
- 서버는 요청받은 HTML, CSS, JavaScript 파일 등을 브라우저에 응답으로 보낸다.
6. HTML 파싱 및 DOM 생성
- 브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이 DOM 트리는 웹페이지의 구조와 내용을 표현한다.
7. CSS 파싱 및 CSSOM 생성
- 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 만든다. CSSOM은 스타일 규칙을 기반으로 페이지의 스타일을 정의한다.
8. JavaScript 실행
- 브라우저는 JavaScript 파일을 다운로드하고 실행하여, DOM을 조작하거나 추가 자원을 요청한다. JavaScript는 웹페이지의 동적 동작을 담당한다.
9. 렌더 트리 생성
- 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 웹페이지가 실제로 어떻게 보일지를 결정하는 구조다.
10. 레이아웃 계산
- 브라우저는 각 요소의 위치와 크기를 계산하여 화면 배치를 결정한다. 이 과정에서는 부모 요소와 자식 요소 간의 관계를 바탕으로 화면에 표시될 각 요소의 정확한 위치와 크기가 설정된다.
11. 페인팅
- 계산된 레이아웃을 바탕으로 픽셀 단위로 화면에 그리는 과정이다. 이 단계에서는 텍스트, 이미지, 색상 등 모든 시각적 요소가 화면에 렌더링된다.
12. 합성 및 디스플레이
- 여러 레이어를 합성하여 최종적으로 화면에 웹페이지를 표시한다. 이 단계에서는 스크롤, 애니메이션, 투명도와 같은 효과를 적용하여 사용자가 보는 최종 결과물이 완성된다.