브라우저가 개발자가 작성한 텍스트 문서를 어떻게 파싱해 브라우저에 렌더링하는지 알아보자.

또한 Javascript의 동작에 대해 알아보자.

1. 렌더링이란?

렌더링은 HTML, CSS, JS 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작이다. 각 브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 가지고 있으며, 브라우저마다 종류가 다르다.

ex) 크롬 ⇒ 블링크 / 사파리 ⇒ 웹킷 / 파이어폭스 ⇒ 개코엔진

슬라이드2.PNG

2. 브라우저 구성 요소

Untitled

  1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
  3. 렌더링 엔진 - 요청한 콘텐츠를 표시한다. ex) HTML을 요청하면 HTML과 CSS 등을 파싱하여 화면에 표시한다.
  4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용된다. (OS 단에서 실행)
  5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그린다. 렌더 트리를 브라우저에 그리는 역할을 한다.
  6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행한다.(파싱. ex( chrome의 v8)
  7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있다.(스토리지)

3. 렌더링 과정

  1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.