[브라우저] 브라우저 렌더링

WONNY_LOG·2023년 7월 11일

STUDY

목록 보기

2/6

브라우저 ?

인터넷에서 웹 서버의 모든 정보를 통신하여 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램

HTML문서, 이미지, 폰트 등 사용자가 선택한 자원을 전송 및 표현하는 응용 소프트웨어
웹브라우저마다 다른 렌더링 엔진을 가지고 있다
ex) Google Chrome(Webkit -> Blink), Apple Safari (Webkit), Naver Whale, Microsoft Edge

브라우저 구성요소

(1) 사용자 인터페이스

브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄, 뒤로 가기 버튼, 플러그인 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤할 수 있는 부분.

(2) 브라우저 엔진

사용자가 주소창에 입력한 URI 값을 렌더링 엔진에게 전달해주는 역할을 한다. 또 새로고침, 뒤로 가기 버튼을 눌렀을 때 그 명령 또한 렌더링 엔진에게 전달.

(3) 자료 스토리지

자료를 저장하는 레이어다. 쿠키나 세션 등 모든 종류의 자원을 하드디스크에 저장한다.

HTML5 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의.

(4) 렌더링 엔진

사용자가 URI를 입력→ URI에 해당하는 데이터를 네트워크 레이어에 전달→ 응답으로 받은 리소스 또는 스토리지에 캐싱된 리소스를 가져와 인터프리터, UI 백엔드에 전달

또 HTML, CSS 코드를 파싱 해서 렌더 트리를 구성해 전달해 주는 등의 총체적인 역할

(5) 네트워크 레이어

렌더링 엔진으로부터 HTTP 요청을 받아서, 서버에게 요청→ 응답 리소스를 받아 렌더링 엔진에게 돌려준다.

(6) 자바스크립트 인터프리터

자바스크립트는 html 태그를 동적으로 움직이는 역할을 수행
렌더링 엔진은 받아온 리소스 중에서 자바스크립트는 인터프리터에 주고,
나머지(HTML, CSS, image 등)를 파싱 하고 그림.
크롬에서는 v8이라는 엔진을 사용하여 자바스크립트를 파싱한다.

(7) UI 백엔드

렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 한다.

`유저 인터페이스` 주소표시줄, 이전/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용하는 곳
`렌더링 엔진` HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 곳
`브라우저 엔진` 유저 인터페이스와 렌더링 엔진을 연결하는 곳
`네트워킹` 각종 네트워크 요청을 수행하는 곳
`UI 백엔드` 체크박스 등 기본적인 위젯을 그려주는 곳
`자료(데이터) 저장소` localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 곳
`자바스크립트 해석기(인터프리터)` 자바스크립트 코드를 실행하는 곳 (크롬은 V8엔진을 사용한다)

브라우저렌더링 ?

브라우저는 크게 4단계를 거쳐 렌더링을 수행한다.

0. 접속

사용자 브라우저 접속

사용자가 > 브라우저 주소표시 줄에 url을 입력하면 > UI스레드는 입력된 내용이 검색어인지, url인지 확인하고 > 입력된 내용을 파싱하여 검색결과로 이동할지, 요청한 사이드로 이동할지 결정한다.

1. 요청 (Resource Downloading)

HTML, CSS, JavaScript와 같은 리소스를 서버에 요청 후 다운

사용자가 enter를 누르면 > (브라우저에서) UI 스레드가 네트워크 호출을 시작 > 네트워크 스레드는 서버로부터 웹사이트에 필요한 리소스를 요청 처리 > 응답 결과가 HTML 파일이면 > 응답결과를 렌더러 프로세스에 전달한다

2. 트리 구축

Document, CSS가 각 트리를 구축하고 이들을 결합한 렌더 트리 형성

2-1
브라우저의 렌더링 엔진은(렌더러 프로세스의 메인스레드) > 전달받은 HTML 문서를 파싱해 > DOM(Document Object Model)Tree 구축
(html문서에 있는 모든것들은 DOM을 구성하게 되고, DOM을 구성하는 각 노드는 서로 연관성을 가짐)
2-2
뒤이어 다운 받은 CSS파일과 함께 포함된 스타일 요소를 파싱해 > CSSOM Tree 구축
(CSSOM은 DOM이 어떻게 화면에 그려질지 알려주는 역할)
2-3
만든 DOM 트리와 CSSOM 트리를 결합하여 렌더트리 형성 > 렌더트리는 최종적으로 화면에 표시되는 모든 노드와 노드의 스타일 정보를 포함함

렌더트리는
- 렌더링 엔진이 만든다
- DOM트리의 최상단 document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아 규칙을 적용한다 > 그러면서 렌더와 관련된 요소들을 렌더트리에 포함시킨다
(렌더트리에 포함되지않는 것 : meta 태그, display:none)

3. Layout

페이지에 출력될 노드들의 크기와 위치, 레이어간의 순서 정보를 계산

브라우저의 자바스크립트 엔진에서 > JS는 > DOM API를 사용해 렌더 트리 변경, 리플로우 리페인트를 한다
(각 요소를 어디에 배치할 지 결정)

4. 페인팅

배치된 엘리먼트(노드)들에게 색을 입히고, 레이어 위치를 결정

[실제 그리기] 렌더트리를 기반으로 HTML요소의 레이아웃 계산, HTML 요소 페인팅을 한다.
(HTML 문서의 최상위 요소부터 실행)

Critical Rendering Path

사용자 동작에 의해 자바스트립트가 실행되어 css의 변경 또는 애니메이션 재생이 일어났을때 3가지의 경우로 동작과정이 일어난다.
(css별로 일어나는 동작과정은 모두 다르다 ! 이를 통해 성능 최적화를 시킬 수 있음)

리플로우 reflow?

요소의 크기나 위치가 바뀔때, 혹은 브라우저 창의 크기가 바뀌었을때 다시 발생한다.

layout부터 paint 모두 재실행
레이아웃 수치를 다시 계산해서 바뀌고, 이에 맞춰서 페인트도 다시 해줘야하고, 레이어를 합성하는 과정까지 다 다시해야한다

리페인팅 repaint?

주로 배경이 이미지나 텍스트,색상, 그림자 등 레이아웃의 수치변화를 시키지 않는 스타일의 변경만 일어났을때 발생한다

paint만 재실행하는 것
레이아웃변경이 일어나지 않기때문에 성능적인 이점이 있다

레이어의 합성

레이아웃과 페인트를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상 가장 큰 이점을 가짐

레이어 : 페인팅할 영역을 나누어 놓은 것

브라우저 렌더링 방식 2가지

CSR(Client Side Rendering)

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 클라이언트는 그것을 받아 랜더링을 시작하는 방식

장점 : 빠른속도와 서버 부하 감소, 변경된 부분의 데이터만 가져옴
단점 : 모든 파일이 다운로드 되고 랜더링이 끝나기 전까지 사용자가 볼 수 있는 게 없다.
적합한 상황 :

네트워크가 빠를때
브라우저에 노출될 데이터양이 많을 때
상호작용이 많은 웹사이트
사용자 경험을 높이고 싶을때
데이터가 개인정보고 구성되어 있을때

SSR(Server Side Rendering)

서버에서 렌더링 준비를 끝마친 상태로 클라이언트에게 전달하는 방식

장점 : 초기 로딩 속도가 빠름
단점 : 요청시마다 새로고침 => 페이지 전체를 새로 변경하기 때문에 깜빡임생김, 바뀔 필요가 없는 부분도 요청
적합한 상황 :

SEO 최적화
최초 로딩이 빨라야할 때
상호작용이 별로 없는 웹사이트
네트워크가 느릴때
누구에게나 동일한 내용을 노출할때

크롬 브라우저 ?

웹브라우저 점유율이 가장 높다

빠르다

모든 작업을 빠르게 수행하도록 설계되어있다.
바탕화면에서 빠르게 시작할 수 있고 복잡한 웹 애플리케이션을 빠르게 실행할 수 있다.

안정적이다

기본적으로 제공되는 악성코드 및 피싱방지 기능을 사용한다.
최신 보안 수정사항 등을 자동으로 업데이트하여 안전하고 보호된 웹 환경을 유지한다.
온라인 상태에서 공유하는 정보를 보호하면서 개인정보를 안전하게 관리 할 수 있다.

다양한 기능을 제공한다

브라우저 설정을 간단하게 변경하고 크롬 웹스토어에서 앱, 확장 프로그램 및 테마를 추가 할 수 있다.
로그인 시 북마크, 기록 및 기타 설정을 모든 컴퓨터에서 동일하게 사용할 수 있다.
즐겨찾는 구글 서비스에 자동으로 로그인 할 수도 있다

사용자 친화적이다

간단한 인터페이스가 사용하기 쉽다

사파리 브라우저 ?

애플이 만들어낸 브라우저

특징

크롬 다음으로 점유율이 높다
사파리의 뉴스 기사 등을 읽을때 주위의 팝업창 등의 광고를 자동으로 안보이게 해주는 기능이있다.
크롬과 같은 엔진인 블링크를 사용한다
속도가 빠르다
상대적으로 메모리를 적게 먹는다
상대적으로 CPU를 적게 먹어 가볍게 돌아간다

보안

다운로드시 매번 확인을 거치고, 패스워드 자동입력도 인증을 거친다.
개발자 등록 심사도 깐깐함

애플 최적화

아이폰, 아이패드 등과 매끄럽게 연동된다.
트랙패드 최적화가 잘되어있다
맥의 경우 기본 탑재 브라우저이다.

렌더링 엔진 동작 과정

Parsing
HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
Style
두 Tree를 결합하여 Rendering Tree를 만든다.
Layout
Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
Paint
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
Composite
레이어를 합성하여 실제 화면에 나타낸다.