브라우저 렌더링 관련 면접준비
시작하며
우선 브라우저 렌더링 과정이 어떻게 진행되었는지 전에 블로그 포스팅한거를 복습하며 짚어보자!
브라우저 렌더링 과정
1. 변환
브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱 && 해당 파일에 지정 된 인코딩(UTF-8 등)에 따라 문자열로 변환.
-> 파싱: 데이터를 분해&분석하여 원하는 형태로 조립하고 다시 빼내는 프로그램
2. 토큰화
파싱한 문자열을 HTML5 표준에 지정된 고유한 토큰으로 변환!
3. 렉싱
토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환!
4. DOM Tree 생성
렉싱 과정을 거쳐 변환된 노드들이 서로 연관성을 가질 수 있도록 DOM Tree 생성!
5. CSSOM Tree 생성
HTML을 읽다 중간 link tag를 만나 CSS요청이 발생하면 DOM Tree생성과 비슷하게 CSSOM Tree생성!
6. Render Tree 생성
렌더링 엔진이 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree 라는 것을 만듬. 렌더트리는 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.
7. Render Tree 배치 (Layout 또는 Reflow 라 부름)
렌더트리 생성 이후, Layout(Reflow)이라는 과정을 거친다.
뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정!
-> CSS에서 %, em,vh,vw등 상대적인 단위를 사용했을떄는 뷰포트에 맞춰서 픽셀(px)단위로 변환된다.
8. Render Tree 그리기 (Paint)
레이아웃 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여 줄지 알게 되면 마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데 이것이 바로 페인트 과정이다.
Browser Rendering의 마지막 과정으로 Render Tree에 포함 된 요소들이나 텍스트 , 이미지들이 실제 픽셀로 그려진다.
이러한 과정을 거쳐서 브라우저 화면에 UI가 나타나게 된다.
질문 답변
브라우저 렌더링 과정은 어떻게 되는지 설명해주실까요?
브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱과 인코딩을 거칩니다.
파싱된 문자열은 고유한 토큰으로 변환이되고 토큰들은 렉싱과정을 통해 노드들로 변환이됩니다.
그리고 노드들이 서로 연관성을 가질 수 있도록 DOM Tree가 생성됩니다.
HTML을 읽다 link tag를 만나 CSS요청이 발생하면 스타일 정보를 담은 CSSOM Tree도 생성됩니다.
그리고 렌더링 엔진이 DOM Tree와 CSSOM Tree를 합친 Render Tree를 생성합니다.
렌더트리가 생성되면 이제 렌더트리 배치를 합니다.
뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정을 렌더트리 배치 Layout 또는 Reflow라고도 불립니다.
Layout과정이 끝나면 마지막으로 실제 픽셀로 그려지도록 변환하는 과정인 페인트과정(Paint)을 거쳐 브라우저 화면에 UI가 나타나게 됩니다.
브라우저의 기본 구조는 어떻게 이루어져 있나요?
주소표시줄, 뒤로가기 / 앞으로가기버튼, 북마크 등으로 이루어진 사용자 인터페이스가있고, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시하게 해주는 렌더링엔진, 그리고 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 브라우저 엔진이 있습니다.
HTTP요청과 같은 네트워크 호출에 사용되는 통신, 자바스크립트 코드를 해석하고 실행하는 자바스크립트 해석기, 체크박스나 버튼 같은 기본적인 위젯을 그려주는 UI백엔드 파트, 브라우저 저장소인 localStorage / sessionStorage 그리고 Cookie와 같이 데이터를 저장하는 자료 저장소로 이루어져 있습니다.
