브라우저 동작 원리와 Progressive Render, Built-in 객체

1] 브라우저 동작 원리

브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링엔진, JavaScript 엔진, 통신, 웹 저장소 등으로 구분된다.

 

먼저 클라이언트가 브라우저를 통해 서버에 웹 페이지 접근을 요청하면 서버는 웹 페이지를 응답해준다

이 때 html, css, js 파일을 전송받고 이를 표현하는데,

 

1) HTML 구문 분석기가 HTML을 분석한다. 분석된 HTML은 DOM Tree를 생성하게 된다. script 태그를 만나는 즉시 구문 분석을 중단하고 자바스크립트 엔진에게 제어 권한을 넘긴다.

 

2) 자바스크립트 엔진은 script 태그에 정의된 자바스크립트 내용을 분석하고 이를 실행한 뒤에 HTML 구문 분석기에게 다시 제어권한을 넘긴다

 

3) 스타일 태그나 스타일이 정의된 곳에 CSS 구문 분석기가 CSS를 분석하여 CSSOM Tree를 생성한다.

 

4) 브라우저는 생성된 DOM Tree와 CSSOM Tree를 통해 Render Tree를 만들고 난 뒤 배치한다.

 

5) 배치가 완료되면 브라우저 화면에 그려주게 된다.

 

 

2] Progressive Render

Progressive Render는 직역하면 점진적인 렌더링한다는 뜻이지만 중요한 컨텐츠를 먼저 렌더링하고 중요하지 않은 컨텐츠는 나중에 렌더링하는 기법이다.

 

예를 들어 신문페이지를 구글 이메일 페이지를 똑같이 렌더링한다고 가정했을 때,

사용자의 메일 내용이 먼저 렌더링되고 중요하지 않은 옵션 창들은 나중에 렌더링된다.

 

장점으로는 빠른 렌더링을 통해 사용자에게 빠르다는 느낌을 줄 수 있지만

단점으로는 모든 렌더링이 끝나야 상호 작용이 가능하다는 것이다.

 

3] Standard Built-in 객체

자바스크립트 객체는 아래와 같이 크게 3가지로 분류할 수 있다

 

1) 네이티브 객체

ECMAScript 명세에 정의된 객체를 말하며 애플리케이션 환경(js, nodejs 등)에 관계없이 공통적으로 사용가능한 객체

=> 표준 내장 객체 (MDN에서는 전역에서 사용가능한 전역 객체들이라고 정의하고 있다)

ex) Math, Object, String, Number, Array, Function, Date, Promise, Boolean 등

 

2) 호스트 객체

브라우저 환경에서 사용가능한 객체이며 MDN에서는 Web API라고 정의하고 있다.

ex) window, document, navigator, history, ...

브라우저 환경이 아닌 런타임환경(nodejs)에서는 사용가능한 API가 다르니 주의하자

ex) global, os, path, http, process, fs, ...

 

3) 사용자 정의 객체

- 사용자가 정의한 객체

 

 

 

 

 

 

 

 

@@@@@