웹 페이지가 보이는 순서와 브라우저 렌더링 과정 설명

 

안녕하세요 찐망고 입니다.

 

기술적인 질문 중 홈페이지가 보이는 순서를 물어보는 경우도 있다고 해서요

오늘은 그에 관련 포스팅을 해볼까 합니다.

 

홈페이지가 보여지는 과정은 클라이언트(사용자 브라우저)와 서버 간의 상호작용으로 이루어집니다.

이 과정은 여러 단계로 이루어져 있으며, 각 단계마다 중요한 역할을 합니다.

 

1. 주소 입력과 서버 연결

사용자가 브라우저 주소창에 웹사이트 주소 (예: www.example.com)를 입력하면, 다음과 같은 일이 일어납니다.

• DNS 조회: 브라우저는 DNS 서버에 해당 도메인의 IP 주소를 요청합니다.
• 서버 연결: IP 주소를 받은 브라우저는 서버와 연결을 시도합니다.

2. 서버로 데이터 요청 및 수신

서버와 연결이 되면:

• 브라우저는 서버에 웹페이지 데이터를 요청합니다.
• 서버는 요청받은 데이터(HTML, CSS, JavaScript 파일 등)를 브라우저에 전송합니다.

3. 브라우저의 렌더링 과정

브라우저가 서버로부터 데이터를 수신한 후, 화면에 웹 페이지를 표시하기 위해 다음과 같은 렌더링 단계를 거칩니다:

• HTML 파싱: HTML을 해석하여 DOM(Document Object Model) 트리를 만듭니다.
• CSS파싱: CSS파일을 해석하여 CSSOM(CSS Object Model)을 생성합니다.
• 랜더 트리 생성: DOM과 CSSOM을 결합하여 화면에 표시될 요소들의 구조를 나타내는 렌더 트리를 생성합니다.
• 레이아웃: 각 요소의 크기와 위치를 계산합니다.
• 페인팅: 실제 화면에 요소를 그리는 과정으로, 색과 형태가 픽셀에 입혀집니다.

4. JavaScript의 실행

HTML을 해석하는 도중 JavaScript 코드를 만나면 브라우저는 이를 실행합니다.

JavaScript는 필요에 따라 DOM을 조작하거나 추가적인 데이터를 서버에 요청하기도 합니다.

 

5. 추가 리소스 로드

렌더링 도중 이미지, 동영상, 폰트 등 추가 리소스가 필요하면 브라우저는 이러한 리소스들을

비동기적으로 로드하여 페이지를 점진적으로 표시합니다.

이 전체과정은 보통 몇 초 이내에 일어나지만, 웹페이지의 복잡도나 네트워크 상태에 따라 더 오래 걸릴 수 있습니다.

웹 개발자들은 이 과정을 최적화하여 페이지 로딩속도를 향상하는데 많은 노력을 기울입니다.

 

 

홈페이지가 브라우저에 표시되는 순서는 크게

요청 → DNS 조회 → 서버 응답 → 브라우저 렌더링 과정으로 이루어지는데요

이 과정을 이해하면 웹이 어떻게 작동하는지, 그리고 최적화가 왜 중요한지를 이해하는 데 도움이 되겠죠?