프론트엔드 면접(브라우저 렌더링)

1. 브라우저 렌더링 파이프라인에 대해서 설명해주세요.

- 알고있는 내용
먼저 브라우더는 HTML을 파싱하여 document object model, 즉 DOM을 생성합니다.
이때 css 파일을 만나면 DOM생성을 잠시 중단하고 파싱하여 CSSOM을 생성하고, 자바스크립트 파일을 만나면 역시 DOM생성을 중단하고 자바스크립트를 파싱합니다. 모든 코드를 파싱하면 DOM과 CSSOM을 합쳐 렌더트리를 생성합니다. 마지막으로 레이아웃과 페인트 과정이 진행되며 웹페이지를 그리는 순으로 렌더링이 진행됩니다.

- 매일메일로 보충한 내용
브라우저 렌더링 파이프라인은 브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정을 의미합니다. 저는 이 과정을 5단계로 나눠 설명해보겠습니다.

첫 번째로 DOM트리 생성 단계입니다. 브라우저는 HTML파일에서 받으면 이 파일을 바이트 단위로 읽고 문자로 변환 한 뒤 HTML토큰으로 변환합니다. 이후 토큰을 이용하여 DOM트리를 생성합니다.

두 번째로 DOM생성 CSS 파일을 파싱하여 CSSOM 트리를 생성합니다.

세 번째로 DOM과 CSSOM트리가 다 생성되면 이를 결합해 렌터 트리를 생성합니다. 렌더 트리에는 실제로 화면에 표시될 요소로만 구성됩니다.

네 번째로 레이아웃 단계입니다. 브라우저는 렌더 트리를 이용해 각 요소의 정확한 위치와 크기를 결정하는 레이아웃 단계를 진행합니다.

마지막으로 페인팅 단계입니다. 레이아웃이 완료되면 브라우저는 각 요소를 실제로 화면에 그리는 작업을 합니다.

브라우저 렌더링은 이렇게 5단계로 나눠 설명할 수 있습니다.