Skip to content

Latest commit

 

History

History
128 lines (80 loc) · 6.57 KB

웹_브라우저_작동_원리.md

File metadata and controls

128 lines (80 loc) · 6.57 KB
Raw

전통적인 웹 브라우저 작동 원리

Rendering Engine(렌더링 엔진)

Webkit Engine : Chrome(not Now), Safari

Webkit

Gecko Engine : Firefox

Gecko

Critical Rendering Path(주요 렌더링 과정)

우리가 흔히 말하는 브라우저에는 각각의 엔진들이 존재한다. 그리고 위에서 보이는 사진처럼 각각의 엔진이 그리는 방법과 순서에도 차이가 있다.

그러나 주요한 렌더링 과정은 비슷하다.

Rendering(렌더링) : 브라우저에 화면을 그리는 행위를 뜻함

웹 브라우저가 화면을 그리는(Rendering) 주요 과정은 아래와 같다.

  1. 서버에서 받아온 HTML 데이터를 Parsing 하여 DOM Tree를 만든다.
  2. Parsing 하던 중 CSS를 만나게 되면, CSSOM(CSS Object Model) Tree를 만든다.
  3. DOM Tree와 CSSOM Tree 2개를 합쳐서 Render Tree를 만든다.
  4. [Layout] Render Tree 노드들의 위치를 계산한다(Flow).
  5. 화면에 웹 페이지를 그린다(Paint).
  6. Layer들을 합친다(Composite).

각각의 순서에 대해 자세히 알아보자.

HTML Data Parsing & DOM Tree 생성

브라우저는 서버로부터 받은 HTML 데이터를 Parsing 하여 DOM Tree를 만들기 시작한다. 모든 HTML Tag에는 Node가 있고, 각각의 Node들은 Tree 형태로 구현되며, 이를 DOM Tree라 부른다.

<html>
  <head>
    <title>DEV sNyung</title>
  </head>
  <body>
    <section>
        <button> Up </button>
        <button> Middle </button>
        <button> Down </button>
    </section>
  </body>
</html>

CSSOM(CSS Object Model) Tree 생성

HTML Parsing 도중 CSS 링크(<link>)를 만나게 되면 서버에 Resource를 요청한다. 받아온 데이터는 Parsing 되고 CSSOM Tree를 만든다. CSSOM이 구성되어야 다음 과정이 진행된다. (Rendering의 Blocking 요소)

위의 사진에서도 DOM Tree와 CSSOM Tree가 만들어져야 다음 단계가 이루어진다. 이 과정이 오래 걸리게 되면 화면이 그려지는데 완료되는 시간이 늦춰진다.

Render Tree 생성

DOM Tree와 CSSOM Tree를 결합하여, Render Tree를 만든다. Render Tree는 DOM Tree에 있는 것 중 우리 눈에 보이는 것만 구성한다.

즉, Ex) style='display : none;' 같은 화면에서 보이지 않는 것들은 Render Tree에서 제외된다. Header에 있는 메타태그도 제외된다.

Render Tree에는 Render Object Tree, Render Layer Tree, Render Style Tree, InlineBox Tree 등이 포함된다. Render Object의 필요에 따라 Render Layer가 만들어지고 GPU 처리 여부에 따라 Graphic Layer(하드웨어 가속)를 생성한다.

[참고] 하드웨어 가속 구글 - GPU 하드웨어 가속

graphic layer

기본적으로 Layer는 하나이며 CPU가 렌더링에 주요한 역할을 한다. 그러나 아래와 같은 경우 GPU를 사용한다. 이러한 방식은 강제로 GPU를 사용하게 하여 성능을 높일 수 있다.

  • CSS 3D Transform(translate3d, preserve-3d 등)이나 perspective 속성이 적용된 경우.
  • CSS 애니메이션 함수나 필터(filter) 함수를 사용하는 경우.
  • video나 canvas Element를 사용하는 경우.
  • 자식 요소가 레이어로 구성된 경우.
  • z-index가 낮은 형제 요소가 레이어로 구성된 경우.
  • will-change 요소가 있는 경우.

Layout(Flow)

Render Tree가 만들어지고, 각각의 노드들의 위치를 계산하는 과정이다. 위치 관련된 속성 계산한다(position, width, height 등등).

ex) width:100%인 상태에서 브라우저를 리사이즈하면, Render Tree는 변경되지 않고 Layout 이후 과정만 다시 거치게 된다. (Reflow => Repaint)

예시와 같이 위치 조정과 다시 그리는 과정만 하는 이유는 렌더링 파이프라인 순서상 위치가 바뀌게 되면 위치를 바꾸고 다시 그리는 과정이 있기 때문이다.

Paint

실제 웹페이지를 화면에 그리는 작업이다.

색이 바뀐다거나 Node의 스타일이 바뀌는 것으로는 Layout 과정을 거치지 않고 Paint만 일어난다.

실제로 paint가 되는 부분을 확인하는 방법으로 Chrome Dev tool에서 Rendering > Paint flashing으로 확인할 수 있다.

paint-flashing

HTML에서 CSS와 JavaScript의 위치는 어디가 좋을까?

브라우저의 Redering 과정에서 DOM Tree를 만든 후, 스타일 규칙이 없으면 Rendering이 불가능하다.

인터프리터은 HTML을 위에서 아래로 읽기 때문에 CSS를 <head></head> 태그 사이에 두면 CSS 리소스를 최대한 빨리 받아올 수 있다.

반면, JavaScript는 DOM 객체를 컨트롤하기 때문에 CSS처럼 위에 위치하게 되면 Parsing을 멈추고 Script를 읽기 때문에 성능이 저하된다. 따라서, JavaScript Code는 주로 </body> 태그 아래에 모아두는 게 좋다.

단, 이런 경우 JS 애니메이션이 나중에 적용되어 사용자 입장에서 깜빡임 현상이 생길 수 있기 때문에 애니메이션 부분만 위쪽에 두는 것도 방법이다.

Composite

예전 브라우저에서는 없던 항목이었으나 브라우저도 발전함에 따라 새롭게 과정이다.

위에 언급한 GPU를 이용한 layer를 여러 개로 나뉘게 되는데 각각의 layer들은 Layout, Paint 과정을 거친 후 만들어진 layer들을 합치는 과정을 Composite라고 한다.

여러 layer로 그리기 때문에 병렬 처리가 가능하며 렌더링 속도를 높일 수 있다.

Reference