[웹]브라우저 렌더링 동작 원리

JavaScript

브라우저란 무엇인가?

---

HTML, CSS, Javascript들을 해석해서 화면에 띄어주는 응용 소프트웨어입니다. 즉, 브라우저의 기본적인 기능은 client가 접속하고 싶은 주소에 접속하면 해당 웹사이트 서버에 요청을 하고 요청으로 받은 html, css script파일을 해석해서 우리에게 보여주게 해 줍니다.

 

브라우저의 기본 구조

---

1. 사용자 인터페이스

    - 우리가 처음에 브라우저(크롬, 파이어폭스, 웨일, 사파리...)를 실행했을 때, 기본적으로 브라우저마다 가지고 있는 영역입니다. ex) 창닫기, 전체 화면, 새로고침 등...

2. 브라우저 엔진

  - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.

3. 렌더링 엔진

  - 렌더링 엔진에서 내가 요청해서 받은 html css 등을 파싱 해서 보여줍니다. 렌더링 동작 원리의 핵심인 부분입니다.

4. 통신

  - http(s) 요청으로 네트워크 호출을 하고 브라우저마다 독립적인 인터페이스입니다.

5. UI 벤 엔드

 - 플랫폼에서 따로 명시하지 않은 일반적인 os 인터페이스를 그립니다.

 

6. 자바스크립트 해석기

  - 여기서 자바스크립트 코드를 해석합니다.

7. 자료 저장소

  - LocalStorage, SessionStorage, Cookie 등 브라우저 메모리를 저장해 주는 영역입니다.

렌더링 엔진

  렌더링 엔진은 요청해서 받은 html, css를 브라우저에 띄어줍니다. HTML, XML 문서 그리고 이미지를 표시할 수도 있습니다. css를 작성하다가 경험해봤겠지만 각각 엔진이 다르기 때문에 브라우저마다 조금씩 다르게 보입니다.

-webkit-	-mz-	-o-	-moz-
파이어폭스	explorer	오페라	파이어폭스

 

렌더링 과정

 

 

1. 브라우저에서 요청해서 받은 html 파일을 읽기 시작하면서 파싱 하여서 DOM트리를 구축하게 됩니다.

DOM(document object model) - DOM은 HTML 문서에 대한 인터페이스입니다. 즉 HTML 문서 형태와 비슷하지만 차이점들이 있습니다. 자바스크립트에서 수정될 수  있는 동적 모델입니다.

2. DOM트리 파싱을 완료하면 완성된 DOM트리와 HTML파싱 하면서 요청해 놓은 link태그, style태그를 결합시켜서 CSSOM트리를 생성합니다.

CSSOM(css object model) - DOM + CSS = CSSOM

3. 마찬가지로 script태그를 만나면 javascript코드를 실행해줍니다.

4. 만들어진 DOM트리와  CSSOM트리가 합쳐져 렌더 트리를 생성하고 위치와 크기를 계산해줍니다.

5. 마지막으로 렌더 트리를 그리고 브라우저에서 보이게 됩니다.

 

파싱(parsing) - 여기서 사용된 파싱은 html, css파일을 브라우저에서 이해할 수 있도록 DOM, CSSOM트리로 변환해주는 것을 파싱이라고 합니다.

 

웹킷 동작 과정