Skip to content

Latest commit

 

History

History
135 lines (68 loc) · 4.84 KB

브라우저의 동작원리.md

File metadata and controls

135 lines (68 loc) · 4.84 KB

브라우저의 동작원리

브라우저의 기본 구조

brouser1

(출처 : https://d2.naver.com/helloworld/59361 )

  1. 사용자 인터페이스 : 페이지를 보여주는 창을 제외한 모든 부분 (주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)
  2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  3. 렌더링 엔진 : 요청한 콘텐츠를 표시하는 엔진(html과 css를 파싱)
  4. 통신 : HTTP 요청과 같은 네트워크 호출
  5. UI 백엔드 : select, input 등 기본적인 위젯을 그리는 인터페이스. OS 인터페이스 체계를 사용
  6. 자바스크립트 해석기
  7. 자료 저장소 : 웹 데이터 베이스(ex- Local Storage, cookie)

브라우저의 페이지 렌더링 과정

브라우저 동작 원리

(출처: https://poiemaweb.com/js-browser)

  1. 요청으로 받아온 HTML을 파싱하여 DOM 트리를 빌드한다.
  2. HTML에서 CSS file을 로드해오고, CSS를 파싱해서 CSSOM 트리를 빌드한다. (렌더링 엔진)
  3. DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 형성한다. (렌더링 엔진)
  4. 렌더 트리를 기반으로 브라우저는 웹페이지를 보여준다. (렌더링 엔진)
  5. 스크립트를 만나면 DOM 생성을 중단하고(DOM 생성이 다 안됬을 경우) 자바스크립트를 로드하고 실행한다. (자바스크립트 엔진)

렌더링 엔진

HTML 문서와 이미지를 화면에 표시.

파이어 폭스는 Gecko, 사파리/크롬은 Webkit이라는 렌더링 엔진을 사용

통신으로부터 문서의 내용(ex - HTML)을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송된다.

DOM 트리 구축을 위한 파싱 => 렌더 트리 구축 => 렌더 트리 배치 => 렌더 트리 그리기 의 순서로 동작한다.

렌더링 엔진은 HTML과 CSS만을 처리하며, 자바스크립트는 자바스크립트 엔진이 따로 처리한다.

HTML 파서

HTML 마크업을 파싱 트리로 변환

HTML은 유연한 문법 체계로 되어 있어서 시작, 종료 태그를 생략해도 파싱이 가능하다.

즉 개발자의 실수를 파서가 수정해준다. (XML 대신 HTML이 쓰이는 이유)

파싱 트리는 DOM 노드와 속성 노드의 트리로 구성된다.

<html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

위 HTML은 다음과 같은 트리로 파싱된다.

brouser8

CSS 파서

브라우저는 HTML에서 css 파일을 참조하는 링크태그를 접하면 즉시 리소스에 대한 요청을 보낸다.

그 요청의 결과(CSS)를 받아 렌더링 엔진은 CSSOM 트리를 구성한다. (DOM과 CSSOM은 독립적인 구조)

CSS는 HTML과 다르게 문법이 정해져있다(문맥 자유 문법)

렌더링 트리

DOM과 CSSOM이 다 구성되면 렌더링 엔진은 이를 합쳐서 렌더 트리(렌더링 트리)를 만든다.

DOM 및 CSSOM은 결합되어 렌더링 트리를 생성합니다.

렌더링 트리를 그리면 레이아웃 단계를 진행한다.

visibility vs display

visibility: "hidden"인 요소는 렌더링 트리에 포함된다. 즉 요소가 보이지 않지만 레이아웃에서 공간을 차지한다.

display: "none"인 요소는 렌더링 트리에 포함되지 않는다. 즉 요소가 보이지 않으며 레리아웃에도 포함되지 않는다.

자바스크립트 엔진

브라우저는 동기적으로 HTML, CSS, JS를 처리한다.

따라서 HTML 파서가 script 태그를 만나면 DOM 생성 프로세스를 멈추고 자바스크립트 엔진으로 권한을 넘긴다.

이때 발생할 수 있는 문제는

  1. 자바스크립트 로딩으로 인한 DOM 생성 지연
  2. DOM이 완성되지 않은 상태에서 DOM 조작의 에러

이다.

이 문제를 막기 위해 일반적으로 html body의 맨 끝에 script 태그를 삽입한다.

defer

HTML5에서는 스크립트에 defer 옵션을 통해 스크립트 로딩을 비동기로 처리할 수 있다.

HTML 파싱을 중단하지 않고 스크립트를 받아오는 동시에 HTML 파싱이 완료되면 스크립트를 실행할 수 있게 된다.

Reference