브라우저 동작 방법

목표 : 브라우저의 동작 원리를 이해한다.

내가 작성한 html, css, javascript 코드는 어떻게 사용되어 지는 것일까? 

 

내용 : 

사용자가 주소를 입력하여 페이지를 요청하고, 서버로 받은 응답을 브라우저에 렌더링 한다. 

 

브라우저는 여러 단계의 레이어로 구성되어 있다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹, 자바스크립트 인터프리터, UI 벡엔드가 있다. 

순서는 다음과 같다. 

1. 주소창과 같은 사용자 인터페이스

2. 사용자 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔징

3. 렌더링 엔진

4. 통신/자바스크립트 해석기/ UI 벡엔드를 통해 자바스크립트를 해석하고 렌더링 트리를 그려준다. 

 

렌더링 엔진은 우리 어플리케이션이 직접 동작하는 레이어인 만큼 자세히 보도록 한다. 

 

■ 렌더링 엔진의 동작 과정

 

1. DOM 생성

 : HTML 문서의 구조와 내용 트리 구조로 표현

2. CSSOM 생성

: 스타일 정보를 트리 구조로 표현

3. 렌더 트리 생성

: DOM과 CSSOM을 결합하여 렌터 트리로 생성 (화면에 표시될 요소와 스타일 정보 포함)

4. 레이아웃 계산
: 렌더 트리 기반으로 각 요소의 위치와 크기 계산(Reflow라고도 함)

5. 페인트 (렌더링)

: 계산된 레이아웃 정보를 바탕으로 픽셀 채움 

6. 합성(Composite)

 : 여러 레이어를 결합하여 최종 화면을 구성. 

 

□ 파싱 

 : 토근화된 코드를 구조화하는 과정

렌더링 엔진에서 HTML과 CSS를 렌더링, JavaScript 해석기를 통해  javascript 파싱

 

□ 렌더 트리 

 : 기본적으로 화면에 나타나는 요소들을 결정하는 트리

어떠한 요소들이 보여야 하는지, 어떤 스타일이 적용되어야 하는지, 그리고 어떤 순서로 나타낼 것인지를 명세하는 트리 

 

□ 레이아웃 

 : 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표를 나타냄. 화면의 레이아웃을 계산함 

 

□ 페인트 

: 레이아웃 단계를 통해 화면에 배치된 엘리멘트들에게 색을 입히고 레이어의 위치를 결정하는 단계 

 

참조 :  요즘IT(https://yozm.wishket.com/magazine/detail/1338/)