코드스테이츠 X 원티드 프리온보딩 FE 코스 Study 내용을 바탕으로 작성하였습니다.

1. 브라우저란?

웹 브라우저(=웹탐색기). 웹 서버에서 양방향으로 통신하며 HTML문서, 그림, 멀티미디어 등의 컨텐츠를 열람하기 위한 GUI 기반 SW 프로그램.
웹 브라우저는 페이지를 다운로드하기 위해 HTTP를 통해 송수신한다.

브라우저의 기능

사용자가 선택한 resource를 서버에 요청하고 서버가 보낸 response를 브라우저에 표시함.

• resource는 대게 HTML 문서.
• URI(Uniform Resource Identifier): resource의 주소

브라우저 구조

• 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
• 렌더링 엔진: 요청한 콘텐츠 표시.
• 통신: HTTP 요청과 같은 네트워크 호출에 사용됨.
• UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. OS 사용자 인터페이스 체계를 사용
• 자바스크립트 컴파일러 : 자바스크립트 코드 해석 & 실핼
• 자료 저장소 : 자료를 저장하는 계층.

브라우저 엔진(렌더링 엔진)

렌더링 엔진은 HTML, XML 문서 및 이미지를 표시할 수 있으며 브라우저마다 다른 엔진을 가지고 있음
ex) Chrome- v8, 파이어폭스 - Gecko

2. 브라우저 렌더링 방식

Render 과정

1. URI에 접속
2. 서버로부터 HTML 문서를 모두 전달받아 읽음
   • 브라우저가 아는 언어는 HTML,CSS,JS, Web Assembly 뿐
   • php,jsp,asp 같은 서버 템플릿 언어도 기본적으로는 HTML을 전달함.
3. 렌더링 엔진은 전달받은 HTML 문서 파싱하여 DOM 객체 모델 생성

• 파싱 : 브라우저 렌더링 엔진이 HTML 파일을 위에서 아래로 한 줄씩 읽어 내려가는 것

4. 다운 받았던 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM 객체 모델 생성
5. DOM 트리와 CSSOM 트리를 합쳐 렌더 트리 구축!(반드시 둘이 결합되어야 렌더 트리가 생성됨)
6. Reflow - 렌더 트리의 각 노드를 화면 상에서 어디에 배치할 지 결정
7. Paint - UI 백엔드에서 렌더 트리를 그림. 유저 눈에 보이게 됨.

Render 과정에서 유의점

불필요한 Layout을 줄여 렌더링 퍼포먼스를 최적화하여야 함.

DOM의 CSS 속성 중 레이아웃을 발생시키는 속성들을 피하여 해당 과정이 발생하는 횟수를 줄여야 함.
ex) left 속성 => transform으로 대체. 혹은 will-change 속성을 사용해 구현

• left 속성은 reflow를 발생시키고 transform의 translate 속성을 사용하면 좌표 값을 사용해 위치를 이동할 뿐 reflow를 발생시키진 않고 repaint만 발생함. => 프레임 유지 보장됨.

* reflow 과정은 줄일 수 있으나 paint는 최적화시킬 수 있는 방법이 없음.(필수적인 과정이라)

Render 과정에서의 용어 정리

DOM

DOM이 변경되면 렌더 트리 생성, reflow, paint 과정이 다시 일어남
reflow와 paint는 각각 컴퓨터 CPU, GPU를 많이 소모함.
🤔 Why? 유저 눈에 과정이 부드럽게 처리되기 위해서 초당 60프레임은 유지시켜야 하기 때문에, 이 짧은 시간동안 reflow, paint 과정을 동시에 처리해야 함. => 이 부분이 frame drop 현상과 연관이 있음
=> SPA, SSR 모두 이를 해결하고자 등장한 것.

Frame Drop

• 초당 유지시키던 프레임 수가 줄어드는 현상.
• 줄어들어 드랍 되어버린 프레임은 렌더링 엔진이 인식할 수 없어 브라우저 화면에 그리지 않음
  => 유저는 '화면이 멈췄다, 버벅인다'라고 느낌

파싱

• 파싱 결과는 보통 문서 구조를 나타내는 노드 트리가 되는데, parse tree 또는 syntax tree라고 부름
• 렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 만드는 것을 파싱한다고 표현

객체모델

• DOM : Document Object Modal. 트리 구조로 이루어진 객체 모델
• CSSOM: CSS Object Modal. 트리 구조. 어휘와 구문을 분석해 css파일을 파싱하고 파싱트리를 생성