기술 면접 질문

브라우저의 렌더링 원리

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP라는 프로세스를 사용하여 다음 단계로 이루어진다.

1. HTML를 파싱 후, DOM트리를 구축한다.
2. CSS를 파싱 후, CSSOM트리를 구축한다.
3. Javascript를 실행한다.
   • 주의! HTML 중간에 스크립트가 있으면 HTML 파싱이 중단된다.
4. DOM과 CSSOM을 조합하여 렌더트리를 구축한다.
   • 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.
6. 계산한 위치/크기를 기반으로 화면에 그린다. (Paint 단계)

WebKit

마크업을 기반으로 올바른 형식의 웹페이지를 표시하는 프레임워크.
이식성이 뛰어나고 사용자 정의 개발이 가능함.

Gecko

Mozilla Project 에서 개발한 많은 애플리케이션/장치에서 사용되는 레이아웃 엔진
HTML, CSS, JavaScript 및 삽입된 콘텐츠(예, 이미지)를 해석하고 모든 것을 화면에 그리는 레이아웃 엔진이라는 소프트웨어

렌더링 엔진

브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko) 라는 렌더링 엔진을 사용한다.

CRP

CRP (Critical Rendering Path, 중요 렌더링 경로) 는 브라우저가 HTML, CSS, JavaScript 를 화면에 픽셀로 변화하는 일련의 단계를 말한다. CRP는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함한다.

파싱 (Parsing)

파싱은 하나의 프로그램을 런타임 환경(예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미한다. 즉, 파싱은 문서의 내용을 토큰(Token)으로 분석하고 , 문법적 의미와 구조를 반영한 파스 트리(Parse tree)를 생성하는 과정이다.

런타임 환경

애플리케이션이 운영체제(OS)의 '시스템 자원 (ex: RAM, 시스템 변수, 환경 변수 등과 같은 시스템 리소스)에 액세스 할 수 있도록 해주는 실행 환경'이다.

토큰(Token)

일반적으로 프로그래밍 언어나 문서의 특정 부분에서 나타나는 최소 단위

파스 트리(Parse Tree)

문법 규칙에 따라 구조화된 입력 문장의 구조를 나타내는 트리. 파서가 입력된 텍스트를 해석하고 문법적인 구조를 표현하는데 매우 중요한 도구 중 하나. 파스 트리를 통해 우리는 입력 문장의 구조를 시각적으로 이해할 수 있다. 이 구조는 문장이 어떻게 해석되고 실행되는지를 파악하는 데 도움이 된다.