2023 - 08 - 25 기술면접(07)- 브라우저의 작동방식

브라우저는 웹 페이지를 표시하고 상호작용할 수 있게 해주는 소프트웨어입니다. 브라우저의 작동 방식은 크게 아래와 같은 단계로 이루어집니다:

1 사용자 입력 및 주소 해석:
사용자가 주소 창에 웹 페이지 주소(URL)를 입력하면, 브라우저는 해당 URL을 해석하여 서버의 IP 주소를 확인합니다. 이를 위해 DNS(Domain Name System) 서버를 사용하여 도메인 이름을 IP 주소로 변환합니다.

2 서버에 요청 전송:
브라우저는 변환된 IP 주소를 사용하여 웹 서버에 HTTP 요청을 전송합니다. 이 요청은 해당 URL에 대한 리소스(HTML 파일, 이미지, 스크립트 등)를 요청하는 것입니다.

3 서버 응답 수신 및 처리:
웹 서버는 요청을 받고 해당하는 리소스를 찾아서 브라우저에 응답합니다. 응답은 보통 HTML 문서와 함께 다른 리소스들의 링크를 포함할 수 있습니다.

4 렌더링 엔진을 통한 페이지 처리:
브라우저는 받은 HTML 문서를 렌더링 엔진을 사용하여 파싱합니다. 렌더링 엔진은 HTML 및 CSS를 해석하고 문서의 구조를 분석하여 웹 페이지의 레이아웃을 결정합니다.

5 렌더링과 스타일링:
브라우저는 HTML 요소를 화면에 표시하기 위해 렌더링 엔진을 사용하여 각 요소의 크기, 위치, 스타일 등을 계산합니다. CSS 스타일 시트는 요소의 디자인과 레이아웃을 지정하는데 사용됩니다.

6 자바스크립트 실행:
브라우저는 HTML 문서 안에 포함된 자바스크립트 코드를 실행합니다. 이를 통해 웹 페이지는 동적으로 동작하며 사용자와 상호작용할 수 있게 됩니다.

7 이벤트 처리와 상호작용:
사용자의 입력이나 페이지 내에서 발생하는 이벤트(버튼 클릭, 폼 제출 등)는 브라우저가 처리하고, 이에 따라 필요한 동작이 수행됩니다. 예를 들어, 사용자가 버튼을 클릭하면 브라우저는 해당 이벤트를 감지하고 지정된 자바스크립트 코드를 실행할 수 있습니다.

8 페이지 렌더링 완료:
브라우저는 모든 리소스를 다운로드하고 렌더링한 후, 최종적으로 웹 페이지를 화면에 표시합니다.

9 네트워크 통신 및 데이터 저장:
브라우저는 필요한 경우 추가적인 리소스를 다운로드하거나 서버와의 통신을 통해 데이터를 가져올 수 있습니다. 브라우저는 캐시를 사용하여 이전에 가져온 데이터를 재사용하거나 로컬 스토리지를 통해 데이터를 저장할 수도 있습니다.

이렇게 브라우저는 웹 페이지의 내용을 해석하고 렌더링하여 사용자가 시각적으로 경험할 수 있는 형태로 제공합니다. 또한 자바스크립트를 실행하여 웹 페이지의 동적인 부분을 처리하고, 사용자의 상호작용에 따라 필요한 동작을 수행합니다.

 

 

 

 

1.  사용자 인터페이스 

 사용자가 접근할 수 있는 영역입니다. URI를 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 , 홈 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.

 

2. 브라우저 엔진 

 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 합니다. 

 

3. 렌더링 엔진 

 웹 서버로부터 응답 받은 자원을 웹 브라우저 상에 나타냅니다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱 하여 화면에 표시합니다. 브라우저의 동작 원리를 이해하려면 렌더링 엔진의 이해가 중요합니다. 

 

 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냅니다. 

 

4. 통신

 HTTP 요청과 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용됩니다. 

 

5. UI 백엔드 

 select, input 등 기본적인 위젯을 그리는 인터페이스 입니다.

 

6. 자바스크립트 해석기

 자바스크립트 코드를 해석하고 실행합니다. 

 

7. 자료 저장소

 Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용하여 저장하는 영역입니다.

---