브라우저 동작 원리

브라우저 주소창에 주소를 입력하면 브라우저는 HTTP GET 요청을 주소에 해당하는 서버로 전송한다. 프론트엔드가 있는 웹 서비스라면 HTML 파일을 보내준다.

 

받은 HTML파일은 다음과 같은 두 단계를 거쳐 HTML 파일을 브라우저에 보여준다.

1. 파싱

2. 렌더링

 

파싱

파싱은 렌더링의 전처리 단계이다. 파싱 단계에서는 다음과 같은 일을 한다.

1. HTML을 트리 형태인 DOM 트리로 변환

2. IMAGE, CSS, SCRIPT와 같은 리소스 다운로드

3. CSS는 CSSOM 트리로 변환

4. 자바스크립트를 인터프리트, 컴파일, 파싱 및 실행

 

렌더링

파싱 후 렌더링 단계를 거친다. 렌더링은 다음과 같은 일을 한다.

1. 내용인 DOM 트리와 디자인인 CSSOM 트리를 합쳐 렌더 트리 생성

2. 노드가 배치될 크기, 장소와 같은 레이아웃 결정

3. 브라우저 스크린에 노드를 출력

 

F12를 누르면 브라우저에서는 개발자 툴을 제공한다. Elements를 보면 왼쪽 상단은 HTML, 오른쪽 상단은 CSS, 하단은 Javascript 콘솔이다.