EtoC
브라우저의 동작원리 본문
주소창으로 네이버를 접속하면 어떤 일이 일어나는지에대해 팀원분이 면접에서 질문을 받았다고 하셨다.
그래서 공부해 볼것을 추천하심
이 질문을 왜하나 했는데 브라우저의 동작원리를 물어보는 것이였다.
Browser
처음 공부를 시작했을때는 브라우저가 인터넷이라고 생각했다.
브라우저는 우리가 인터넷에서 서칭할때 사용하는 프로그램으로 크롬,파이어폭스,사파리,엣지같은 소프트웨어를 말한다.
브라우저는 파일명 뒤에 .html이라는 확장자가 붙은 문서을 읽어 브라우저에 띄워준다.
- 주소창에 naver.com을 입력하면 브라우저 엔진이 입력된 텍스트가 검색어인지 url인지를 먼저 확인한다.
검색어라면 브라우저는 검색엔진의 url에 검색어를 포함한 주소로 페이지를 이동시킨다.url이라면 브라우저 엔진은 네트워크 스레드를 통해 네트워크를 호출한다.네트워크를 호출하는 이유는 네이버의 html,css,이미지 등의 데이터를 브라우저가 가지고있지 않고 네이버 서버에 존재하기때문이다.- 이렇게 네트워크를 호출한뒤 클라이언트는 서버주소를 알기위해 네임서버와 통신하고 알아낸 주소로 통신하여 필요한 데이터를 받아온다.
- 그리고 렌더링 작업을 거쳐 악성바이러스가 있는지 확인한다.
- 브라우저엔진은 랜더링 엔진에 데이터를 해석하고 화면에 웹페이지를 띄울것을 요청한다.
- 랜더링은 html을 파싱하여 dom트리를 구축하고, css를 파싱하여 cssom트리를 구축한다.
- 이과정을 통해 렌더트리를 구축(형상구축)하고 랜더트리를 배치한다.(layout, reflow)
- 마지막으로 랜더 트리를 그린다(paint).
- 페인트는 랜더 트리의 각 노드를 화면의 실제 픽셀로 변환해주는 작업으로 이를 래스터라이징(rasterizing)이라 한다.
DOM treeDOM 트리란 '문서 객체 모델 (Document Object Model)' 의 줄임말로, 쉽게 말해 객체로 표현된 HTML 문서이다.
브라우저는 HTML 텍스트 문서를 바로 읽을 수 없기 때문에, 이를 객체의 형태로 바꾸어 브라우저가 읽을 수 있는 트리 구조로 변환해주어야 한다. 이것이 바로 DOM 트리이다.
parsing브라우저는 HTML, CSS 등 단순한 텍스트 문서를 이해하지 못한다.따라서 이 문서를 브라우저가 이해할 수 있는 구조로 변환해주는 과정이 반드시 필요하다.이를 파싱 (Parsing) 이라 한다.
뿌듯해하며 면접스터디에서 자신있게 설명했는데 이건
팀원 : "프론트쪽이잖아요.."
나 : .....에?(프백 나눠서 였어요..?)
팀원들: "다시 공부해오세요^^"
백엔드쪽에서는 사용자가 주소창에 네이버 url을 입력했을때 다음과같은 일이 일어난다.
DNS 조회 (Domain Name System):
브라우저는 입력된 도메인 이름(www.naver.com)을 IP 주소로 변환하기 위해 DNS 서버에 요청하고, 이 때, 해당 도메인의 IP 주소가 반환된다.
TCP/IP 연결:
브라우저는 얻어낸 IP 주소를 사용하여 해당 서버에 TCP/IP 연결을 시도한다. 이 단계에서는 네트워크 레벨에서 서버와 클라이언트 간의 통신을 위한 연결이 설정된다.
HTTP 요청 전송:
브라우저는 서버에 HTTP 요청을 전송한다. 일반적으로는 GET 요청이 사용되며, 이 요청은 주로 루트 경로(/)로 전송된다.
서버의 응답 수신:
서버는 브라우저의 요청을 받고, 그에 따른 응답을 생성하여 브라우저에 전송한다.
응답은 HTML 문서, CSS, JavaScript 파일, 이미지 등의 리소스로 구성될 수 있다.
HTML 파싱 및 렌더링:
브라우저는 받은 HTML 문서를 파싱하고, DOM (Document Object Model)을 생성한다.
이후에는 CSS 및 JavaScript와 같은 추가 리소스를 필요에 따라 다운로드하고 실행하며, 최종적으로 웹 페이지를 렌더링한다.
