[기술면접] 브라우저 작동방식

브라우저 작동방식

1. URL 해석 및 요청
   • 사용자가 웹 브라우저 주소창에 URL 입력 시, 브라우저가 이를 해석하고 해당 웹 서버 IP 주소를 DNS(Domain Name Systerm) 서버에서 탐색
   • 브라우저는 서버에 HTTP 요청을 보내고, 웹 페이지를 요청. 사용자 에이전트 정보도 함께 전송됨
2. 서버 응답
   • 서버는 요청을 받고, 요청된 웹 페이지의 리소스(HTML 문서, CSS, JS, 이미지)를 찾아서 응답
   • 응답은 HTTP 상태코드와 함께 전송
3. HTML 파싱 및 렌더링
   • 브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model)을 생성(DOM은 웹 페이지의 구조와 내용을 표현하는트리구조)
   • CSS 파일도 다운로드/파싱하여 CSSOM(CSS Object Model: 스타일 정보를 담고 있는 객체 모델)생성 후 DOM과 결합하여 렌더링트리 생성.
   • 브라우저는 이 렌더링 트리를 화면에 그림
4. 렌더링
   • 렌더링 엔진은 렌더링 트리를 기반으로 CSS 스타일을 적용하고, 레이아웃을 계산하며, 픽셀로 변환하여 웹 페이지를 화면에 표시함.
   • 화면에 표시되는 모든 요소들은 화면에 배치되며, 사용자가 볼 수 있도록 브라우저 창에 렌더링함
5. 자바스크립트 실행
   • 웹 페이지에 포함된 JS 코드가 파싱되고 실행되어 DOM을 변경하거나 사용자 상호작용을 처리하는데 사용됨.
   • JS 엔진은 실행 스택을 사용하여 코드를 순차적으로 실행하며, 비동기 작업은 이벤트 큐를 통해 관리됨.
6. 이벤트 처리
   • 사용자의 상호작용(클릭, 키보드 입력 등...)은 이벤트로 처리되며, 이벤트 핸들러가 등록된 JS 코드에 의해 처리됨.
   • 이벤트 핸들러는 비동기적으로 실행되며, 화면에 변화를 줄 수 있음.
7. 네트워크 요청
   • 웹 페이지에 포함 된 이미지, 비디오, 스크립트 파일 등의 리소스는 필요할 때마다 서버에서 다운로드 됨.
   • 브라우저는 네트워크 요청을 비동기적으로 처리하며, 필요한 리소스를 캐싱하여 중복 다운로드를 방지함.
8. 페이지 업데이트
   • 사용자가 페이지를 스크롤하거나 다른 페이지로 이동할 경우, 브라우저는 새로운 HTML을 요청하고 1~7 단계를 다시 수행하여 새로운 페이지를 렌더링