웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다.
그렇기 때문에 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다.
브라우저 주요 기능
- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
- 자원의 형태는 여러가지이다.(보통 HTML문서이지만 이미지 또는 다른 형태일 수 있다.)
- 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.
브라우저 동작원리
- 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다.
- HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.
- 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
브라우저의 사용자 인터페이스는 보통 5개의 부분은 필수로 포함되어 있다.
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
브라우저의 기본 구조
- 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
- 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
- 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
- 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
- UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
- 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
- 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
인터페이스란?
서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다.
렌더링 엔진
요청 받은 내용을 브라우저 화면에 표시하는 일
렌더링 엔진의 동작과정
렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다.
그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다.
스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성한다.
DOM 노드란?
DOM은 Document Object Model, 한글로는 문서 객체 모델이라고 하고 노드는 DOM의 요소 1개를 말한다.
HTML, 또는 XML 페이지의 구조와 요소들을 제어할 수 있도록 제공하는 프로그래밍 인터페이스, 또는 구조화된 데이터를 말한다.
웹브라우저는 먼저 HTML 파일을 읽어 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다.
이것이 DOM 입니다. DOM이 일단 완성되고 나면, 자바스크립트와 같은 프로그래밍 언어가 DOM을 제어할 수 있게 된다.
웹브라우저가 화면에 웹페이지를 표시하는 단계로 넘어가기 전에 실행되는 자바스크립트가 DOM을 제어한다.
DOM 제어가 끝나면 웹브라우저는 DOM 구조를 기반으로 화면에 웹페이지를 그리는 과정을 진행한다.
이 그리는 과정을 렌더링(Rendering) 이라고 한다.
렌더링에는 CSS 파일의 화면 배치와 속성에 대한 정보를 정보를 사용한다.
이 과정에서 웹브라우저는 DOM과 마찬가지로 CSS를 읽어 CSSOM(Cascading Style Sheet Object Model) 을 생성한다.
CSS를 구조화 된 데이터 형태로 생성한 것이다.
DOM 과 CSSOM을 조합해 화면에 표시할 최종 구조를 만든다.
이것을 렌더트리라고 부른다.
렌더트리를 기초로 화면에 HTML 페이지를 그린다.
렌더 트리 생성이 끝나면 배치가 되면서 컨텐츠 파일들 또한 비동기로 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
