뜻밖의워크숍 #1 프론트엔드개발자를위한

크롬렌더링성능인자이해하기

Chang W. Doh

GDG WebTech OrganizerHTML5Rocks/KO Contributor/Coordinator

</hi>

<hi>

하드웨어가속 , CPU, GPU GPU 렌더링프로세스 성능이슈의발생요인 크롬의웹페이지렌더링과정 렌더링성능최적화에대한토론

GDG Korea WebTech - Unexpected Workshop

프론트엔드개발자를위한 크롬의렌더링성능인자

이해하기

WARNING!

간략한설명과이해를위해 렌더링하드웨어구조및개념은최신기술과구조가아닌

초기파이프라인을기초로설명합니다 . :)

하드웨어가속

VS

“ ” 같은기능을 하드웨어 의지원을통해더빠르게 !!!!

그래픽스 & 하드웨어가속

VS

레스토랑의예

http://www.bedbugbarrieorilliapestcontrol.ca/resources/RestChef2.jpg

혼자일하는주방장 주방장 + 보조요리사

S/W 렌더링과 H/W Acc. 렌더링

소프트웨어렌더링의실행구조

소프트웨어렌더링성능

응용프로그램의실행성능 = 주요기능의수행시간 + 그래픽스출력

시간

대량의연산이필요한 렌더링의경우

CPU + GPU

Software only

+ GPU Acceleration

렌더링작업지시

http://www.bedbugbarrieorilliapestcontrol.ca/resources/RestChef2.jpg

성능비교

안드로이드 3.0 의 ListView 의하드웨어가속및소프트웨어렌더링의성능비교

CPU 와 GPU 사이에 존재하는이슈들

이슈 1. 서로다른메모리공간

“CPU 와 GPU 는전혀다른메모리공간을사”용

Main Memory

CPU

Video Memory

GPU

BUS

무엇을그려야하는지알려주세요 !

이슈 2. 메모리는한계가있다 .

“ 처리할모든데이터는메모리에 , 하지만한계가 ...”

Memory

코드 이미지데이터

또다른코드 또다른데이터

새로운데이터

?????

“ 더이상저장할수없으면어떻게 ???”

이슈 3. 데이터는자주변경된다 .

“CPU 의데이터변경시 GPU 메모리도변경”필요

CPU 가변경한이미지 ( 메인메모리 )

GPU 가알고있는이미지 (VRAM)

디스플레이 ?

“ 모르는걸어떻게그려요 ?”

GPU 에서일어나는일들

간단한 3D 그래픽스개념 &GPU 의렌더링동작

Vertex & Polygon

“ 공간좌표 (Vertex) 가모여도형 (Polygon)을 ...”

Texture & Texture Mapping

“이미지 (Texture) 를도형에씌워그리기(Mapping)”

변환 (Transform)

“회전 /확대 /축소 /기울임 /...”

20 년전의렌더링파이프라인

우리가말하는 비디오메모리

버텍스가모여서

폴리곤에 텍스쳐를입혀서

디스플레이이미지로

하드웨어가속렌더링의 성능최적화를위한첫걸음 :

GPU 가잘하는것과못하는것의이해

“GPU 는수신된데이터로무언가를그리는데”적합

1. 텍스쳐를가지고이미지를빠르게출력가능2. 이미가진텍스쳐는다시받지않고재활용3. 회전 , 확대 , 축소 , 기울임 , 반투명처리등4. 위기능들의동시처리하는것도매우최적화

GPU 가잘하는것

그렇다면GPU 의동작을방해하는일들은 ?

FACT> “ 비디오메모리로의데이터전송은”느림

비디오메모리로의데이터전송속도

Main Memory

CPU

Video Memory

GPU

BUS

“ 데이터전송시간 = 데이터의크기 / BUS ”속도

● 일반적으로예상되는데이터크기 :o GPU 명령 < 버텍스 < 텍스쳐이미지

이슈 : 비디오메모리로의전송속도

FACT> “GPU 의데이터는 CPU 에서생성후”전송

더큰이슈 : CPU 처리시간

데이터

CPU

2 VRAM

GPU

13

렌더링

예 > 코드에 의해텍스쳐로

사용될 이미지를생성

즉 , 렌더링의관점에서 GPU 에서사용될데이터를새로만들어서이를전송하는과정은하나의과정 !

중간점검 : 렌더링성능의주요인자

1. GPU 는회전 /확대 /축소 /기울임 / 반투명처리등에최적화a. 이범주의기능으로렌더링이처리될수있도록

2. GPU 에서사용할데이터를준비하는것은 CPU 의몫a. CPU 가새로운데이터를만드는작업은최소화

3. CPU 가준비한데이터는비디오메모리에전송필요a. 데이터의전송을최소화할수있도록 ...

크롬의하드웨어가속 렌더링메커니즘

웹페이지의렌더링

크롬의렌더링

1. 웹페이지는파싱을통해 DOM 트리로해석되어메모리에적재2. DOM 트리를렌더링트리로생성후각노드들을개별적인이미지로생성3. 트리구조및스타일에따라이미지를배치및합성하여출력

레이어모델

레이어 (Layer)?

웹페이지를렌더링하기위해필요한이미지단위의요소

● 각레이어는최종적으로표현될이미지를생성하는단위

● 생성된이미지는텍스쳐로서 GPU 에업로드● 레이어들을배치 / 합성하여최종적인웹페이지표현

NOTE!● 레이어의이미지는 CPU 에서생성 !

o 즉 , 레이어에서생성되는이미지는 CPU 시간소모 !

4 개의레이어로이루어진웹 페이지의예

컴포지트 (Composite)

● Reflow = Layout = Layoutingo DOM 노드가가지는레이아웃정보 (Geometry) 가

변경되면레이아웃은재배치를위한계산이필요

이슈 : Reflow

Header

DIV

Footer

Header

DIV

Footer

이슈 . Reflow 로발생할수있는일

Node Node

Node

Node

Node#A

Node

Node#A{ border: 30px;}

Invalidate Invalidate

Invalidate

1. 레이아웃의변경이트리를따라전파 (CPU)2. 많은경우레이어이미지의갱신필요 (CPU)3. 레이어이미지가변경되면 VRAM 의텍스쳐갱신필요 (RAM to VRAM Bandwidth!!!)

INVALIDATE!!

● Repaint = Redrawo 레이아웃내컨텐츠가변경시텍스쳐를새로생성필요

이슈 : Repaint

데이터

CPU

2 VRAM

GPU

13

렌더링

이그림기억하십니까 ?

이슈 : Reflow/Repaint 발생요인● DOM 노드의동적인추가 /삭제 /업데이트● DOM 노드의감춤 /표시

o display: noneo visibility: hidden

● DOM 노드의이동 , 애니메이션● 스타일시트의추가혹은스타일속성의변경

o 미디어쿼리역시● 브라우저사이즈변경● 폰트변경● 스크롤● …

크롬 DevTools: Timeline - Frame

정리 : 크롬에서의전반적인렌더링흐름

1. DOM 으로부터노드들을개별적으로혹은그룹지어레이어단위들로분리2. 레이아웃을계산하고각레이어들이그려져야할영역의크기위치등을계산a. 위치 / 크기정보등을계산하기위한 CPU 의계산오버헤드 가발생

3. 레이어들각각은렌더링을위해비트맵으로출력a. CPU 에서레이어이미지를생성하는오버헤드 가발생

4. 생성된비트맵을 GPU 에텍스쳐로업로드a. GPU 의비디오메모리로전송하는오버헤드 는발생

5. 계산된레이아웃으로레이어의텍스쳐이미지들을최종스크린이미지로합성

렌더링성능최적화 !

● 네이티브어플리케이션관점 :o 최대한가벼운렌더링프로세스의구성이목적

> 3D 혹은 2D 게임개발의예“ 이번게임은꽤그래픽출력이많기때문에 CPU 와 GPU 사이의병목

구간을최소화할수있도록텍스쳐의생성 / 업로드를병목구간전에미리처리하고 , 텍스쳐캐싱정책을블라블라한모델에따라관리하도록

모듈을 !@#!@$ 하게작성합니다 .

또한우리게임에서특별하게발생할몇몇상황에도이러한렌더링모듈에 대한커스텀구현으로이를회피할방법을찾을수있을것입니다 .” - A

개발팀장의커피톡

최적화에대한그래픽모듈의구현관점

● 빠른렌더링패스를구현하는것이아니다 !!!o 렌더링패스는철저하게브라우저의영역o 웹렌더링성능최적화는만드는것이아니라 병목

구간의발생요인을피해가는것 !

● 피해야할성능의위험인자o CPU 에서텍스쳐이미지를생성하는요인들o 가급적이면레이아웃변경의요인도 !!

웹페이지에서의렌더링최적화는 ...

크롬에서 DOM 노드가레이어로분리되는조건들1. 3D 혹은 Perspective 를표현하는 CSS transform 속성을가진경우2. 하드웨어가속디코딩을사용하는 <video> 엘리먼트3. 3D 컨텍스트혹은하드웨어가속 2D 컨텍스트를가지는 <canvas> 엘리먼트

4. ( 플래시와같은 ) 플러그인영역5. 투명도 (opacity) 속성혹은 transform 애니메이션의사용6. 가속가능한 CSS 필터를가진경우7. Compositing Layer 를하위노드로가진경우8. 낮은 z-index 를가진형제노드가 Compositing Layer 를가진경우

가장간단한 Hack: 레이어의분리

분리조건요약 : 해당 DOM 노드가주변노드와는별도로렌더링되어야빠른 경우

예 1> 투명도 (Opacity): 겹쳐진다른이미지와픽셀단위의블렌딩 (Blending) 되는경우 . 하지만애니메이션에서만성능이슈가발생하므로애니메이션일

경우만분리

예 2> 매번표시되는프레임이변경되는 <video> 엘리먼트 .

개발자의 Hack! translateZ(0);● translateZ(0); 는노드의 Z 축값으로 0 을주는무의미한코드● 그러나레이어분리조건의첫번째항목에해당

가장간단한 Hack: 레이어의분리

강제적인레이어분리가만능은아니다 !

● 왜 ?o 레이어분리는필연적으로텍스쳐이미지분리를의미

추가적인메모리소모o 메모리는유한하다 !

메모리공간부족시기존데이터릴리즈후새로운데이터의업로드

● 최악의경우가반복되면 ... 레이어분리를통한성능이점을송수신오버헤드로상쇄

● 따라서 , 레이어분리는최소화필요 !!!

하드웨어가속으로얻는성능은 절대로공짜가아님 ! :)

모든것에가능성을두고확인 !

토론해볼만한내용들 :

추측해봅시다 !

ROCK You!