브라우저 동작과정

웹 애플리케이션 구동 과정

1. URL entered : 사용자가 웹브라우저에서 사이트 주소를 입력한다.

2. DNS Lookup : DNS를 이용하여 사이트 주소에 해당되는 Server IP를 접근한다.

3. Socket Connection :Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결.

4. HTTP Request : Client에서 HTTP Header와 데이터가 서버로 전송

5. Content Download : 해당 요청이 Server에 도달하면 사용자가 원하는 문서를 다시 웹브라우저에 전송한다.

6. Browser Rendering : 브라우저의 렌더링 엔진이 해당 문서를 다음과 같은 순서로 파싱한다.

• HTML을 DOM(Document Object Model)으로 변환
• CSS를 DOM에 추가 (CSSOM 생성)
• DOM으로 렌더트리 생성
• 렌더트리 배치
• 렌더트리 그리기

7. Display Content : 렌더트리를 브라우저에 표시 후 사용자에게 웹페이지로 보여준다.  

 

CSS Reflow - Google.com

 

브라우저의 역할과 종류 ?

사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에 표시한다.

주요 브라우저

• Google Chrome ‐ Webkit
• Safari ‐ Webkit
• Mozilla Firefox (Escape) ‐ Gecko
• Microsoft Internet Explorer
• Opera

 

브라우저 엔진 ?

Webkit : Google, Apple이 공동 개발한 오픈 소스 기반 엔진. 주요 모바일 브라우저가 모두 웹킷 기반

 

렌더링 엔진

ㅇ 서버로 부터 요청받은 내용을 브라우저에 표시하는 역할

ㅇ 동작과정

• HTML -> DOM 파싱
• Render Tree 생성
• Render Tree 배치
• Render Tree 그리기

* Render Tree : HTML 요소와 CSS 스타일링 정보를 포함한 트리, DOM + CSSOM

 

DOM

• HTML의 내용과 속성을 노드(오브젝트)로 갖고 각 노드의 관계를 나타내는 트리
• HTML 문서를 구조화하여 스크립트 또는 프로그래밍 언어에서 접근 가능한 형태로 제공
  
  
  

HTML의 DOM 변환과정

서버로 요청한 HTML 문서를 전송 받은 후 다음과 같이 변환한다.

1. HTML태그 -> 토큰 : HTML 태그를 토크나이저를 이용하여 토큰으로 변환
2. 토큰 -> 노드 : 토큰을 트리 구조의 노드로 변환
3. 모두 변환된 노드를 이용하여 DOM을 구성

 

결론 : 바이트 -> 문자 -> 토큰 -> 노드 -> DOM

 

CSSOM (CSS Object Model)

DOM 생성과 마찬가지로 body, p와 같은 토큰들을 노드로 변환하여 CSS Object Model로 변환한다.

 

CSS는 페이지 렌더링을 방해한다. 브라우저가 모든 CSS를 파싱하고 처리할 때 까지 페이지가 화면에 그려지지 않는다.

개발자 콘솔의 타임라인에서 Recalculate style시 CSSOM를 생성함

 

 

Render Tree

• 브라우저가 DOM + CSSOM을 가지고 화면의 픽셀로 변환하려면 Render Tree가 필요하다.
• DOM에 CSS 스타일링을 추가하는 작업을 Attachment라고 한다.

 

 

• Render Tree는 DOM과 CSSOM을 조합하여 오직 화면에 표시할 요소들만 포함한다.

 

 

Layout

• Render Tree를 브라우저에 표시하기 위해서는 레이아웃 작업이 필요하다.
• 레이아웃 작업은 재배치 비용이 비싸기 때문에, 가능한 한번에 업데이트하고 자주 Recalculate Style을 하지 않도록 한다.

 

What is DOM reflow?

DOM 리플로우는 페이지를 표시하기 위해 브라우저가 DOM 요소의 위치/크기를 다시 계산해야 할 필요가 있을 때 발생한다. DOM에서 그 요소 다음에 나타나는 요소, 하위 요소 및 요소에 대한 리플로우를 트리거 한다. 그런 다음 최종 재 페인트를 호출한다. 리플로우는 비용이 많이 들지만 불행하게도 쉽게 트리거 될 수 있다. 예를 들면 display:none은 DOM 리플로우를 야기하지만 visibility:hidden은 리플로우가 없다.

리플로우는 다음 경우에 발생한다.

• DOM에서 요소 삽입, 제거, 업데이트
• 페이지의 콘텐츠 수정(예: 입력박스의 텍스트)
• DOM 요소의 이동
• DOM 요소의 애니메이션
• offsetHeight 또는 getComputedStyle과 같은 요소의 측정
• CSS 스타일 바꾸기
• 요소의 className 변경
• 스타일시트 추가 또는 제거
• 창 크기 조정
• 스크롤

Mozilla Browser Reflow Visualization

 

Paint

• Render Tree를 배치하고 실제 브라우저에 그리는 작업을 한다.
• 렌더트리를 화면의 픽셀로 전환하는 작업이다.