[CS지식] 브라우저 렌더링

hyo·2023년 5월 15일

critical rendering path 렌더링엔진 브라우저 렌더링

CS지식

목록 보기

1/2

웹 브라우저 구조

시작하며

우리는 HTML / CSS / Javascript 로 코드를 써서 웹페이지를 만든다.
웹 브라우저는 이 코드를 가지고 웹 페이지를 그려주게 된다.
이 때, 브라우저에서는 어떤 일이 일어날까?

브라우저의 공통적인 구조(구성요소)

위처럼 크게 7가지로 구성된다.

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

웹 브라우저마다 다른 렌더링 엔진

웹 브라우저는 Chrome(크롬), Safari(사파리), Firefox(파이어폭스)가 있다.

Safari -> Webkit
Firefox -> Gecko
Chrome -> Blink (예전엔 Webkit을 사용했다가 2013년에 Webkit에서 갈라져나온 Blink라는 엔진을 사용하고 있다)

모든 렌더링엔진이 약간 기본적으로 웹표준을 준수하면서도 엔진마다 조금씩 다르게 동작하는 부분이 있다.

이번 포스팅에선 Chrome을 기준으로 알아보자!

렌더링 엔진의 두 가지 목표

HTML / CSS / JS / 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.
업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.

-> 위에서 말한 업데이트 란? 사용자 동작으로 인해 입력이 발생, 스크롤 발생, 애니메이션 동작, 비동기요청으로 인한 데이터로딩 등 개발자도구를 켜서 performance를 눌러 Layout, painting, composite를 확인해 볼 수 있다.

위와 같은 목표를 위해서 렌더링 엔진은 크게 다음의 과정을 거쳐서 동작하는데 이를 Critical Rendering Path 라고 한다.

Critical Rendering Path

1. 변환 : 브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱하고, 해당 파일에 지정 된 인코딩(UTF-8 등)에 따라 문자열로 변환한다.

2. 토큰화 : 코드를 파싱 한 문자열을 HTML5 표준에 지정된 고유한 토큰으로 변환한다.

3. 렉싱 : 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환한다.

4. DOM TREE 생성 : 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이를 DOM Tree라 한다.

변환 & 토큰화

<!DOCTYPE html>
<html>
  <head>
    <title>hyo blog</title>
    <link rel='stylesheet' href='style.css'/>
    <meta charset='utf-8'/>
  </head>
  <body>
    <h1>렌더링 과정</h1>
    <p>hello</p>
    <span>world</span>
    <div>
      <img src='image.jpeg' alt='이미지' />
    </div>
  </body>
</html>

렉싱

토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환!

DOM Tree 생성

렉싱 과정을 거쳐 변환된 노드들이 서로 연관성을 가질 수 있도록 DOM Tree 생성!

CSSOM Tree 생성

HTML을 DOM Tree로 만드는 과정과 비슷하게, CSS로는 CSSOM Tree가 생성된다.
DOM이 어떻게 화면에 표시될 지를 알려주는 역할을 한다.

CSS도 위에서 아래로 스타일 규칙이 정해지기 때문에 이 또한 Tree구조를 가지고 있다. ->

-> 예를 들어 스타일시트에서 body태그에 text-align이라는 속성을 정해뒀다면
자식태그들에게도 적용되는 것.

Render Tree 생성

렌더링 엔진이 DOM Tree 와 CSSOM Tree를 합쳐서 Render Tree 라는 것을 만들게 된다.
렌더트리는 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.

Render Tree(렌더트리)가 만들어지는 과정

1. document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.

2. 렌더와 관련된 요소들을 렌더트리에 포함 시키게 된다. (meta 태그나 display: none 같은 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더트리에 포함되지 않는다)

렌더트리 그림은 많이 간소화되어 있기 때문에, 렌더트리가 실제로는 더 많은 데이터를 가지고 있고, 브라우저마다 조금씩 다르게 생성된다는 것을 알고 있자.

Render Tree 배치(Layout 또는 Reflow)

Render Tree가 생성되었다면 Layout이라는 과정을 거친다.
ViewPort 내에서 요소들의 정확한 위치와 크기를 계산하는 과정이다.
박스모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백 그리고 이외의 스타일 속성이 계산된다.
이 때, CSS에서 %나 em,vh,vw 와 같은 상대적인 단위를 사용했을때는 이게 뷰포트에 맞춰서 픽셀(px)단위로 변환된다.

Render Tree 그리기 (Paint)

레이아웃 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여 줄지 알게 되면 마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데 이것이 바로 페인트 과정이다.
Browser Rendering의 마지막 과정으로 Render Tree에 포함 된 요소들이나 텍스트 , 이미지들이 실제 픽셀로 그려진다.
이러한 과정을 거쳐서 브라우저 화면에 UI가 나타나게 된다.

렌더링 엔진 과정을 마치며

이렇게 HTML 과 CSS를 가지고 렌더링 엔진이 어떻게 동작하는지를 살펴보았다.

Critical Rendering Path의 시간을 줄이면 브라우저가 웹 페이지를 보여 주는 데 걸리는 시간도 줄일 수 있다.

UI가 업데이트 되는 상황 즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때에는 어떻게 될까?? 다음 포스팅에 써보겠다.

hyo

개발 재밌다

다음 포스트

[CS지식] 브라우저 렌더링

CS지식

웹 브라우저 구조

시작하며

브라우저의 공통적인 구조(구성요소)

위처럼 크게 7가지로 구성된다.

웹 브라우저마다 다른 렌더링 엔진

웹 브라우저는 Chrome(크롬), Safari(사파리), Firefox(파이어폭스)가 있다.

이번 포스팅에선 Chrome을 기준으로 알아보자!

렌더링 엔진의 두 가지 목표

HTML / CSS / JS / 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.

업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.

Critical Rendering Path

1. 변환 : 브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱하고, 해당 파일에 지정 된 인코딩(UTF-8 등)에 따라 문자열로 변환한다.

2. 토큰화 : 코드를 파싱 한 문자열을 HTML5 표준에 지정된 고유한 토큰으로 변환한다.

3. 렉싱 : 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환한다.

4. DOM TREE 생성 : 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이를 DOM Tree라 한다.

변환 & 토큰화

렉싱

DOM Tree 생성

CSSOM Tree 생성

Render Tree 생성

Render Tree(렌더트리)가 만들어지는 과정

1. document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.

2. 렌더와 관련된 요소들을 렌더트리에 포함 시키게 된다. (meta 태그나 display: none 같은 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더트리에 포함되지 않는다)

Render Tree 배치(Layout 또는 Reflow)

Render Tree 그리기 (Paint)

렌더링 엔진 과정을 마치며

이렇게 HTML 과 CSS를 가지고 렌더링 엔진이 어떻게 동작하는지를 살펴보았다.

Critical Rendering Path의 시간을 줄이면 브라우저가 웹 페이지를 보여 주는 데 걸리는 시간도 줄일 수 있다.

UI가 업데이트 되는 상황 즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때에는 어떻게 될까?? 다음 포스팅에 써보겠다.

[CS지식] 브라우저 렌더링2 (최적화)

0개의 댓글

[CS지식] 브라우저 렌더링

CS지식

웹 브라우저 구조

시작하며

브라우저의 공통적인 구조(구성요소)

위처럼 크게 7가지로 구성된다.

웹 브라우저마다 다른 렌더링 엔진

웹 브라우저는 Chrome(크롬), Safari(사파리), Firefox(파이어폭스)가 있다.

이번 포스팅에선 Chrome을 기준으로 알아보자!

렌더링 엔진의 두 가지 목표

HTML / CSS / JS / 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다.

업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.

Critical Rendering Path

1. 변환 : 브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱하고, 해당 파일에 지정 된 인코딩(UTF-8 등)에 따라 문자열로 변환한다.

2. 토큰화 : 코드를 파싱 한 문자열을 HTML5 표준에 지정된 고유한 토큰으로 변환한다.

3. 렉싱 : 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환한다.

4. DOM TREE 생성 : 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이를 DOM Tree라 한다.

변환 & 토큰화

렉싱

DOM Tree 생성

CSSOM Tree 생성

Render Tree 생성

Render Tree(렌더트리)가 만들어지는 과정

1. document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.

2. 렌더와 관련된 요소들을 렌더트리에 포함 시키게 된다. (meta 태그나 display: none 같은 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더트리에 포함되지 않는다)

Render Tree 배치(Layout 또는 Reflow)

Render Tree 그리기 (Paint)

렌더링 엔진 과정을 마치며

이렇게 HTML 과 CSS를 가지고 렌더링 엔진이 어떻게 동작하는지를 살펴보았다.

Critical Rendering Path의 시간을 줄이면 브라우저가 웹 페이지를 보여 주는 데 걸리는 시간도 줄일 수 있다.

UI가 업데이트 되는 상황 즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때에는 어떻게 될까?? 다음 포스팅에 써보겠다.

[CS지식] 브라우저 렌더링2 (최적화)

0개의 댓글

[CS지식] 브라우저 렌더링