브라우저
브라우저란 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어다. 우리가 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지, 파이어폭스 등이 바로 브라우저다.
브라우저는 클라이언트/서버 모델로써 클라이언트는 웹 서버에 접속하고 정보를 요청하는 컴퓨터를 운영한다. 웹 서버는 해당 정보를 HTTP를 따라 웹 브라우저에 전송하며, 웹 브라우저는 해당 결과를 표시한다.
작동원리
브라우저의 주소창에 웹 주소를 입력하면, 브라우저는 HTTP GET 요청을 웹 주소의 서버로 전송한다.
보통 프론트엔드가 있는 웹 서비스의 경우 HTML 파일을 결과로 반환한다.
HTML을 받은 브라우저는 파싱과 렌더링을 거쳐서 텍스트로 된 HTML을 브라우저에 보여준다.
파싱은 렌더링을 하기 위한 전처리 단계이다. 파싱 단계에서 브라우저가 하는 일은 크게 3가지이다.
1. 브라우저는 HTML을 트리 자료구조의 형태인 DOM트리로 변환한다.
2. image,css,script 등 다운로드해야 하는 리소스를 다운로드한다. (css의 경우 다운로드하고 css를 cssom트리로 변환한다.)
3. 다운로드한 자바스크립트를 인터프리트, 컴파일, 파싱, 실행한다.
파싱을 마친 후 브라우저는 렌더링에 들어간다.
첫 번째로 DOM(내용) 트리와 CSSOM(디자인) 트리를 합쳐 렌더 트리를 만든다.
두 번째로 레이아웃을 정한다. 트리의 각 노드가 브라우저의 어디에 배치될지, 어떤 크기로 배치될지 정한다.
세 번째로 브라우저 스크린에 렌더트리의 각 노드를 그려준다. 사용자는 시각화된 HTML 파일을 볼 수 있게 된다.
