웹사이트 접근 과정
사용자가 웹사이트에 접근하는 과정을 통해 브라우저가 작동하는 과정을 알아보자.
1. 사용자는 브라우저를 실행한다.
2. 사용자가 브라우저의 주소창에 접속하고 싶은 사이트의 URL을 입력한다.
3. 브라우저는 입력된 URL의 서버에게 사용자가 선택한 자원을 받는다.
3-1. 자원은 보통 HTML, CSS, JS, PDF, IMG 등의 형태다.
4. 받아온 자원을 화면에 표현하면 사용자는 정보를 활용한다.
우리가 주로 알고 있는 웹 브라우저는 구글 크롬, 마이크로소프트 에지, 파이어폭스, 사파리 등이 있다.
브라우저의 기본 구조
1. 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
2. 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
3. 렌더링 엔진
요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시함.
4. 통신
HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5. UI 백엔드
콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기
자바스크립트 코드를 해석하고 실행.
7. 자료 저장소
이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹데이터 베이스가 정의되어 있다.
렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.
브라우저별로 사용하는 렌더링 엔진은 다음과 같다. 이글에선 웹킷(Webkit)을 기준으로 설명할 것이다.
| 브라우저 | 엔진 |
| 파이어 폭스 | 게코(Gecko) 엔진 |
| 사파리, 크롬 | 웹킷(Webkit) |
렌더링 동작 과정
1. 파싱
*파싱(parsing)이란?
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다. 파싱을 하는 프로세서를 파서라고 부른다.
어휘 분석은 자료를 토큰으로 분해하는 과정이다. 토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데 인간의 언어로 말하자면 사전에 등장하는 모든 단어에 해당된다. 어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거한다.
구문분석은 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성한다. 구문 분석은 보통 어휘 분석기로부터 새 토큰을 받아서 구문 규칙과 일치하는지 확인한다. 규칙에 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고 파서는 또 다른 토큰을 요청한다.
규칙에 맞지 않으면 구문 분석은 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유효하지 않고 구문 오류를 포함하고 있다는 의미다.
2. DOM트리 구축
*DOM(Document Object Model)이란?
HTML태그를 JS에서 이용할 수 있는 객체로 만드는 것이다. 즉, HTML 문서의 객체 기반 표현 방식이다.
HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다. 현재 진행 중인 HTML5는 안타깝게도 파서가 요구하는 문맥 자유 문법에 의해 쉽게 정의할 수 없다. 그럼에도 HTML을 쓰는 이유는 HTML이 "너그럽다"는 점이다.
HTML은 암묵적으로 태그에 대한 생략이 가능하다. 가끔 시작 또는 종료 태그 등을 생략한다. 전반적으로 뻣뻣하고 부담스러운 XML에 반하여 HTML은 "유연한" 문법이다.
3. CSSOM트리 구축
*CSSOM(CSS Object Model)이란?
JS에서 CSS 조작할 수 있는 API집합이다. HTML 대신 CSS가 대상인 DOM이라고 생각할수 있으며, 사용자가 CSS스타일을 동적으로 읽고 수정할 수 있는 방법이다.
웹킷은 CSS 문법 파일로부터 자동으로 파서를 생성하기 위해 플렉스와 바이슨 파서 생성기를 사용한다. 파서 소개에서 언급했던 것처럼 바이슨은 상향식 이동 감소 파서를 생성한다. 파이어폭스는 직접 작성한 하향식 파서를 사용한다. 두 경우 모두 각 CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다.
5. JS 처리
자바스크립트는 자바스크립트 엔진이 처리하는데 HTML파서는 <script>태그 를 만나면 자바스크립트 코드를 실행하기 위해 DOM생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.
제어권을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 자바스크립트 코드 혹은 script의 src attribute에 정의된 js파일을 로드하고 파싱/기계어로 컴파일하여 실행한다.
브라우저는 동기적으로 HTML, CSS, Javascript를 처리하는데, 이는 <script>태그의 위치에 따라 DOM생성이 지연될 수 있다는 뜻이다.
스크립트 로드 시점 - async, defer
문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의 되어 있다면 이벤트 연결은 문서의 로드시점에 맞게 처리해야 한다는 것이다. 이렇게 <head>에 삽입하는 경우에 모던 브라우저에서는 defer, async 속성을 사용할 수 있다.
4. 렌더 트리 구축
DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다. 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적이 있다.
5. Layout 배치
렌더러가 생성되어 트리에 추가될 때 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치 또는 리플로라고 부른다.
배치는 반복되며 HTML 문서의 <html> 요소에 해당하는 최상위 렌더러에서 시작한다. 배치는 프레임 계층의 일부 또는 전부를 통해 반복되고 각 렌더러에 필요한 크기와 위치 정보를 계산한다.
최상위 렌더러의 위치는 0,0 이고 브라우저 창의 보이는 영역에 해당하는 뷰포트 만큼의 면적을 갖는다.
모든 렌더러는 "배치" 또는 "리플로" 메서드를 갖는데 각 렌더러는 배치해야 할 자식의 배치 메소드를 불러온다.
6. Layout 그리기
그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 "paint" 메서드가 호출된다. 그리기는 UI 기반의 구성 요소를 사용한다.
참고
'면접질문' 카테고리의 다른 글
| this의 정의 (0) | 2022.10.31 |
|---|---|
| RESTful API (0) | 2022.10.28 |
| 클로저(closure)의 개념 (0) | 2022.10.28 |
| 호이스팅(Hoisting)의 개념 (0) | 2022.10.25 |