브라우저 렌더링

HP :) 😃·2022년 8월 2일

오늘은 면접 질문에도 자주 나오는 브라우저 렌더링 과정에 대해서 공부해보도록 하겠습니다.

📚 개념

먼저 브라우저의 기본 구조에 대해서 알아보겠습니다.

사용자 인터페이스 : 주소표시줄 , 이전/다음 버튼 , 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분을 말합니다.
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어하고 주소 표시줄에 적은 URI를 렌더링 엔진에게 전달합니다. ( 새로고침 , 뒤로가기 , 홈버튼을 눌렀을때 그것의 명령을 렌더링 엔진에게 전달 )
⭐️ 렌더링 엔진 : 요청한 URI를 브라우저 엔진에게 받아서 server에게 요청한다 (통신). server로 부터 URI에 해당하는 데이터 (HTML ,CSS ,JS)를 받아서 파싱한 후 렌더링합니다.
통신 : 렌더링 엔진으로부터 HTTP 요청등을 받아서 네트워크 처리 후 응답을 전달합니다.
자바스크립트 해석기 : JavaScript를 파싱합니다. ( chrome은 V8 )
자료 저장소 : 쿠키 , storage등을 저장합니다.
UI 백엔드 : render tree를 browser에 그리는 역할을 합니다.

다음은 브라우저의 렌더링 과정을 살펴보겠습니다.

사용자가 UI 주소표시줄에 URI를 입력하면 그 URI는 브라우저 엔진에게 전달되게 됩니다.
브라우저 엔진은 먼저 자료 저장소에서 URI에 해당하는 자료를 찾고 cookie 형태로 캐싱된 데이터가 존재한다면 그 자료를 렌더링 엔진에게 전달합니다.
렌더링 엔진은 브라우저 엔진에게 전달받은 자료(HTML , CSS , Image)를 분석하고 URI 데이터를 통신 , 자바스크립트 해석기 , UI 백엔드로 전파한다.
만약 서버에 해당하는 데이터가 있다면 통신 레이어에서 요청하고 응답할때까지 기다린다.
응답받은 데이터에서 HTML , CSS는 렌더링 엔진이 파싱한다.
응답받은 데이터에서 JavaScript는 자바스크립트 해석기가 파싱한다.
자바스크립트 해석기는 파싱한 결과를 렌더링 엔진에 전달하고 3,5번에서 파싱한 HTML의 결과인 DOM tree를 조작한다.
DOM tree 구성요소는 render tree 구성요소로 변한다.
UI 백엔드는 render object를 브라우저 렌더링 화면에 띄어준다.

다음은 렌더링 엔진에 대해서 자세하게 알아보겠습니다.

먼저 렌더링 엔진은 어휘 분석을 통해서 HTML5 표준에 지정된 토큰으로 변환되고(파싱) DOM tree를 생성합니다.
그 다음에 CSS를 파싱한 후에 CSSOM tree를 생성합니다.
HTML과 CSS를 파싱해서 만들어진 DOM tree와 CSSOM tree를 합쳐서 render tree를 만듭니다.( render tree : 화면에 표시되어야 할 모든 노드의 컨텐츠 , 스타일 정보 포함 )
render tree의 생성이 끝나면 배치가 시작됩니다. 뷰포트내에서 요소들에 정확한 위치 , 크기를 계산합니다. (layout , reflow)
배치가 완료되면 UI백엔드에서 paint 작업을 실행합니다.(paint , repaint)

Reflow : 자바스크립트로 DOM을 변경하거나 CSS에서 위치 값에 영향을 주는 속성들을 변경하는 등 레이아웃에 영향을 미치게 되면 레이아웃 -> 페인트 -> 합성 과정이 재실행되는 리플로우가 발생합니다.
Repaint : 레이아웃에 영향을 미치지 않는 속성들을 변경할 때에는 페인트 -> 합성 과정이 재실행되는 리페인트가 발생합니다.

아래에 성능 최적화를 통해서 자세히 알아보겠습니다 😃