[백엔드] 기술 면접 Top30 - #7 브라우저 작동방식

브라우저 작동방식

 

 

브라우저란?

 

1. 사용자 입력 및 URL 해석

• 사용자가 주소 표시줄에 웹 페이지 주소(URL)를 입력하거나 하이퍼링크를 클릭합니다.
•  브라우저는 입력된 URL을 해석하고 해당 웹 페이지로 이동하기 위해 필요한 작업을 시작합니다.
  
  

2. 서버 연결

• 브라우저는 입력된 URL을 사용하여 웹 서버와 통신하기 위해 인터넷을 통해 연결을 설정합니다.
• 이 연결은 일반적으로 HTTP 또는 HTTPS 프로토콜을 사용하여 이루어집니다.
  
  

3. 웹 페이지 요청과 응답

• 브라우저는 웹 서버에게 웹 페이지를 요청하고, 서버는 요청된 페이지의 데이터를 응답합니다. 
• 이 데이터에는 HTML 문서, CSS 스타일시트, JavaScript 코드, 이미지 등이 포함될 수 있습니다.
  
  

4. HTML 파싱과 DOM 트리 생성

• 브라우저는 받아온 HTML 문서를 파싱하여 Document Object Model (DOM) 트리를 생성합니다. 
• DOM 트리는 웹 페이지의 구조와 요소를 나타내는 트리 구조입니다.
  
  

5. CSS 파싱과 스타일 계산

• 브라우저는 받아온 CSS 스타일시트를 파싱하고, DOM 트리의 각 요소에 대한 스타일을 계산합니다. 
• 스타일 계산은 요소의 크기, 색상, 글꼴 등의 스타일 속성을 결정합니다.
  
  

6. 렌더링

• 브라우저는 DOM 트리와 계산된 스타일 정보를 사용하여 화면에 웹 페이지를 그립니다. 
• 이 과정은 레이아웃, 페인트, 합성 등 다양한 단계를 거칩니다.
  
  

7. 상호작용 및 이벤트 처리

• 브라우저는 사용자의 상호작용을 감지하고, 마우스 클릭, 키보드 입력 등의 이벤트를 처리합니다. 
• JavaScript를 사용하여 이벤트 핸들러를 등록하고, 이벤트에 대한 응답을 실행합니다.
  
  

8. 네트워크 통신

• 브라우저는 웹 페이지에서 추가적으로 필요한 자원(예: 이미지, 스크립트 파일)을 다운로드하기 위해 필요한 경우 서버와 추가적인 네트워크 통신을 수행합니다.
  
  

9. 캐싱

• 브라우저는 이전에 방문한 웹 페이지의 일부를 캐시하여 다음 방문 시 더 빠른 로딩을 가능하게 합니다.
  
  

10. 보안

• 브라우저는 보안 기능을 제공하여 사용자 정보 및 브라우징 활동을 보호합니다. 
• HTTPS 연결 및 쿠키 관리 등이 여기에 포함됩니다.
  
  

11. 사용자 인터페이스

• 브라우저는 사용자에게 주소 표시줄, 탭, 북마크, 뒤로 가기 및 앞으로 가기 버튼과 같은 인터페이스를 제공하여 웹 페이지를 쉽게 탐색할 수 있게 합니다.

 

요약

브라우저는 웹 페이지를 표시하기 위해 사용자 입력과 웹 서버 통신을 수행합니다.
웹 페이지의 내용은 HTML, CSS, JavaScript를 통해 해석하고 렌더링됩니다.
사용자 인터페이스를 통해 웹 페이지를 탐색하고 보안 기능을 제공하며,
필요한 자원을 네트워크를 통해 다운로드합니다.