SlideShare a Scribd company logo
1 of 25
Download to read offline
웹 프론트엔드 개발에 숨겨진 성능 비용
- Reflow & Repaint
발표자. 엄 두성
브라우저 렌더링 프로세스의 이해
• Rendering Engine Basic Flow :
브라우저가 네트워크 계층에서 요청된 데이터를 받아오면
렌더링 엔진이 움직이기 시작한다.
HTML Code
DOM Tree
documentElement
(html)
head body
meta title style p div
CSS Code
Styles
Structure
Styling
Information
cascades
Parse Parse
: 랜더링 엔진에서 코드를 파싱하여 DOM Tree를 생성
Render Tree
root
(render view)
body
DOM Tree
Styles
Structure
p
: DOM을 화면에 그리기 위한 정보들을 Rendering Tree로 생성
Render Tree
root
(render view)
body
p
: 생성된 Rendering Tree로 Element의 위치나 크기 정보를 생성
http://www.youtube.com/watch?v=nJtBUHyNBxs
http://www.youtube.com/watch?v=AKZ2fj8155I
: 생성된 정보를 바탕으로 실제 화면을 그린다.
브라우저 렌더링 프로세스의 이해
Reflow Repaint
그렇다면..
화면구성이 완료된 후 동적인 변화발생 시엔?
• 특정 엘리먼트의 Color 값에 변화 발생
→ 해당 엘리먼트의 Repaint 발생
• 엘리먼트의 포지션에 변화가 발생
→ 해당 엘리먼트의 Repaint + 레이아웃의 Reflow 발생
즉, 엘리먼트의 폰트 사이즈를 키우는 단순한 작업만 추가 되더라도
전체 Render Tree의 Repaint와 Reflow를 유발
Reflow? Repaint?
• Repaint (or Redraw) :
1. 엘리먼트의 스킨에 변화가 발생하지만,
레이아웃에는 영향을 미치지 않을 때 유발
• Reflow :
1. 문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 뿌림
2. Repaint 보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스
무엇이 Reflow를 유발시키는가?
- 브라우저 창 크기 수정
- DOM 트리 수정
- Style sheet 추가
- Style Property 수정
- 편집 ( 입력, ContentEditable )
- 등등..
Reflow 발생 example
Reflow 발생 그래프 :
단계별 설명
1.Click 이벤트
2.Recalculate ( 변경된 스타일 수치 계산 수행)
3.Layout (Reflow 과정 수행)
4.Paint (Repaint 과정 수행)
function reflow() {
document.getElementById(‘container’).style.width=600px;
}
Reflow를 피하거나 그 영향을 최소화하는 방법
1. 애니메이션이 들어간 노드는 position:fixed 또는
position:absolute로 지정하여 전체 노드에서 분리
2. cssText 를 활용해 Reflow or Repaint 최소화
3. DOM 사용을 최소화하여 Reflow 비용 줄이기
4. 등등..
특정 노드의 Position 속성 변경 (1)
- position 속성을 "fixed" 또는 "absoute"로 값을 주면
해당 노드는 전체 노드에서 분리 됨.
즉, 전체 노드에 걸쳐 Reflow 비용이 들지 않으며,
해당 노드의 Repaint 비용만 들어가게 됨.
특정 노드의 Position 속성 변경 (1)
테스트 코드:
<div id="container_animation“
style="background:blue;
position:absolute;
top:0px;left:0px;width:100px;height:100px;
border:red 1px solid;">
</div>
function animation() {
document.getElementById('container_animation').style.left = '100px';
document.getElementById('container_animation').style.top = '100px';
return false;
}
특정 노드의 Position 속성 변경 (2)
테스트 결과:
cssText 를 활용해 Reflow 최소화 (1)
- DOM과 스타일 변경을 하나로 묶어 Reflow 수행을
최소화 한다.
cssText 를 활용해 Reflow 최소화 (2)
case 1 : (Bad Case) 해당 노드의 style 객체를 여러번 호출해 적용
function collect() {
var elem = document.getElementById('container');
elem.style.backgroundColor = 'red';
elem.style.width = '200px';
elem.style.height = '200px';
return false;
}
cssText 를 활용해 Reflow 최소화 (3)
case 2 : style 객체 속성인 cssText를 통해 한번에 적용.
function collect() {
var elem = document.getElementById('container');
elem.style.cssText = 'background:red;width:200px;height:200px;';
return false;
}
cssText 를 활용해 Reflow 최소화 (4)
테스트 결과 :
상황 별 Reflow 비용에 드는 시간.
Case 1 : 112ms
Case 2 : 104ms
DOM 사용을 최소화하여 Reflow 비용 줄이기(1)
- 노드 조각(document.createDocumentFragment),
노드 사본(elem.cloneNode) 을 활용하여 DOM 접근을
최소화 하여 비용을 줄일 수 있다.
DOM 사용을 최소화하여 Reflow 비용 줄이기(2)
Case 1 : (Bad Case)
function notReflow() {
var elem = document.getElementById('container');
for (var i = 0; i < 10; i++) {
var a = document.createElement('a');
a.href = '#';
a.appendChild(document.createTextNode('test' + i));
elem.appendChild(a);
}
return false;
}
DOM 사용을 최소화하여 Reflow 비용 줄이기(3)
Case 2 : 노드 조각을 활용한 엘리먼트 추가 방법
function notReflow() {
var frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var a = document.createElement('a');
a.href = '#';
a.appendChild(document.createTextNode('test' + i));
frag.appendChild(a);
}
document.getElementById('container').appendChild(frag);
return false;
}
DOM 사용을 최소화하여 Reflow 비용 줄이기(4)
Case 3 : 노드 사본을 활용한 엘리먼트 추가 방법
function notReflow() {
var elem = document.getElementById('container');
var clone = elem.cloneNode(true);
for (var i = 0; i < 10; i++) {
var a = document.createElement('a');
a.href = '#';
a.appendChild(document.createTextNode('test' + i));
clone.appendChild(a);
}
elem.appendChild(clone);
return false;
}
DOM 사용을 최소화하여 Reflow 비용 줄이기(5)
상황별 테스트 결과:
 Case 1 : 153ms
 Case 2 : 136ms
 Case 3 : 129ms
Thank you

More Related Content

What's hot

더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components
정호 전
 

What's hot (20)

Handlebars
HandlebarsHandlebars
Handlebars
 
[week14] Getting started with D3.js
[week14] Getting started with D3.js[week14] Getting started with D3.js
[week14] Getting started with D3.js
 
Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전Bs webgl소모임001 uniform버전
Bs webgl소모임001 uniform버전
 
Bs webgl소모임002
Bs webgl소모임002Bs webgl소모임002
Bs webgl소모임002
 
더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components더 나은 웹표준을 위한 Web Components
더 나은 웹표준을 위한 Web Components
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
 
파이썬 언어 기초
파이썬 언어 기초파이썬 언어 기초
파이썬 언어 기초
 
Blockchain Programming with Lisp
Blockchain Programming with LispBlockchain Programming with Lisp
Blockchain Programming with Lisp
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
[Week13] D3.js_Bar Chart
[Week13] D3.js_Bar Chart[Week13] D3.js_Bar Chart
[Week13] D3.js_Bar Chart
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!
 
꿈데디 D3.js강의 2주차
꿈데디 D3.js강의 2주차꿈데디 D3.js강의 2주차
꿈데디 D3.js강의 2주차
 
Node.js + Express + MongoDB
Node.js + Express + MongoDBNode.js + Express + MongoDB
Node.js + Express + MongoDB
 
[week16] D3.js (Scale & axis)
[week16] D3.js (Scale & axis)[week16] D3.js (Scale & axis)
[week16] D3.js (Scale & axis)
 
5-3. html5 device access
5-3. html5 device access5-3. html5 device access
5-3. html5 device access
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 

Similar to Reflow and repaint 성능 비용

만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
ukjinkwoun
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
Jong-hyun Park
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
중선 곽
 

Similar to Reflow and repaint 성능 비용 (20)

웹 브라우저는 어떻게 동작하나? (2)
웹 브라우저는 어떻게 동작하나? (2)웹 브라우저는 어떻게 동작하나? (2)
웹 브라우저는 어떻게 동작하나? (2)
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
웹표준(XHTML+CSS)
웹표준(XHTML+CSS)웹표준(XHTML+CSS)
웹표준(XHTML+CSS)
 
웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)웹표준 (XHTML + CSS)
웹표준 (XHTML + CSS)
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
 
나만의 엔진 개발하기
나만의 엔진 개발하기나만의 엔진 개발하기
나만의 엔진 개발하기
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 
Anatomy of Realm
Anatomy of RealmAnatomy of Realm
Anatomy of Realm
 
만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
만들면서 배우는 Cocos2d x 멀티 플랫폼 게임 프로그래밍 10-11장
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
Image styling with_web_components
Image styling with_web_componentsImage styling with_web_components
Image styling with_web_components
 
First Step In Ajax Korean
First Step In Ajax KoreanFirst Step In Ajax Korean
First Step In Ajax Korean
 
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30thWeb Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
 

More from Doo Sung Eom (6)

Ml
MlMl
Ml
 
introduce to spring cloud
introduce to spring cloudintroduce to spring cloud
introduce to spring cloud
 
Viticulture Software - VineSense
Viticulture Software - VineSenseViticulture Software - VineSense
Viticulture Software - VineSense
 
Viticulture Software - VineSense
Viticulture Software - VineSenseViticulture Software - VineSense
Viticulture Software - VineSense
 
수업
수업수업
수업
 
임베디드 시스템사례찾기(중앙도서관)
임베디드 시스템사례찾기(중앙도서관)임베디드 시스템사례찾기(중앙도서관)
임베디드 시스템사례찾기(중앙도서관)
 

Reflow and repaint 성능 비용

  • 1. 웹 프론트엔드 개발에 숨겨진 성능 비용 - Reflow & Repaint 발표자. 엄 두성
  • 2. 브라우저 렌더링 프로세스의 이해 • Rendering Engine Basic Flow : 브라우저가 네트워크 계층에서 요청된 데이터를 받아오면 렌더링 엔진이 움직이기 시작한다.
  • 3. HTML Code DOM Tree documentElement (html) head body meta title style p div CSS Code Styles Structure Styling Information cascades Parse Parse : 랜더링 엔진에서 코드를 파싱하여 DOM Tree를 생성
  • 4. Render Tree root (render view) body DOM Tree Styles Structure p : DOM을 화면에 그리기 위한 정보들을 Rendering Tree로 생성
  • 5. Render Tree root (render view) body p : 생성된 Rendering Tree로 Element의 위치나 크기 정보를 생성
  • 8. 그렇다면.. 화면구성이 완료된 후 동적인 변화발생 시엔? • 특정 엘리먼트의 Color 값에 변화 발생 → 해당 엘리먼트의 Repaint 발생 • 엘리먼트의 포지션에 변화가 발생 → 해당 엘리먼트의 Repaint + 레이아웃의 Reflow 발생 즉, 엘리먼트의 폰트 사이즈를 키우는 단순한 작업만 추가 되더라도 전체 Render Tree의 Repaint와 Reflow를 유발
  • 9. Reflow? Repaint? • Repaint (or Redraw) : 1. 엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 유발 • Reflow : 1. 문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 뿌림 2. Repaint 보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스
  • 10. 무엇이 Reflow를 유발시키는가? - 브라우저 창 크기 수정 - DOM 트리 수정 - Style sheet 추가 - Style Property 수정 - 편집 ( 입력, ContentEditable ) - 등등..
  • 11. Reflow 발생 example Reflow 발생 그래프 : 단계별 설명 1.Click 이벤트 2.Recalculate ( 변경된 스타일 수치 계산 수행) 3.Layout (Reflow 과정 수행) 4.Paint (Repaint 과정 수행) function reflow() { document.getElementById(‘container’).style.width=600px; }
  • 12. Reflow를 피하거나 그 영향을 최소화하는 방법 1. 애니메이션이 들어간 노드는 position:fixed 또는 position:absolute로 지정하여 전체 노드에서 분리 2. cssText 를 활용해 Reflow or Repaint 최소화 3. DOM 사용을 최소화하여 Reflow 비용 줄이기 4. 등등..
  • 13. 특정 노드의 Position 속성 변경 (1) - position 속성을 "fixed" 또는 "absoute"로 값을 주면 해당 노드는 전체 노드에서 분리 됨. 즉, 전체 노드에 걸쳐 Reflow 비용이 들지 않으며, 해당 노드의 Repaint 비용만 들어가게 됨.
  • 14. 특정 노드의 Position 속성 변경 (1) 테스트 코드: <div id="container_animation“ style="background:blue; position:absolute; top:0px;left:0px;width:100px;height:100px; border:red 1px solid;"> </div> function animation() { document.getElementById('container_animation').style.left = '100px'; document.getElementById('container_animation').style.top = '100px'; return false; }
  • 15. 특정 노드의 Position 속성 변경 (2) 테스트 결과:
  • 16. cssText 를 활용해 Reflow 최소화 (1) - DOM과 스타일 변경을 하나로 묶어 Reflow 수행을 최소화 한다.
  • 17. cssText 를 활용해 Reflow 최소화 (2) case 1 : (Bad Case) 해당 노드의 style 객체를 여러번 호출해 적용 function collect() { var elem = document.getElementById('container'); elem.style.backgroundColor = 'red'; elem.style.width = '200px'; elem.style.height = '200px'; return false; }
  • 18. cssText 를 활용해 Reflow 최소화 (3) case 2 : style 객체 속성인 cssText를 통해 한번에 적용. function collect() { var elem = document.getElementById('container'); elem.style.cssText = 'background:red;width:200px;height:200px;'; return false; }
  • 19. cssText 를 활용해 Reflow 최소화 (4) 테스트 결과 : 상황 별 Reflow 비용에 드는 시간. Case 1 : 112ms Case 2 : 104ms
  • 20. DOM 사용을 최소화하여 Reflow 비용 줄이기(1) - 노드 조각(document.createDocumentFragment), 노드 사본(elem.cloneNode) 을 활용하여 DOM 접근을 최소화 하여 비용을 줄일 수 있다.
  • 21. DOM 사용을 최소화하여 Reflow 비용 줄이기(2) Case 1 : (Bad Case) function notReflow() { var elem = document.getElementById('container'); for (var i = 0; i < 10; i++) { var a = document.createElement('a'); a.href = '#'; a.appendChild(document.createTextNode('test' + i)); elem.appendChild(a); } return false; }
  • 22. DOM 사용을 최소화하여 Reflow 비용 줄이기(3) Case 2 : 노드 조각을 활용한 엘리먼트 추가 방법 function notReflow() { var frag = document.createDocumentFragment(); for (var i = 0; i < 10; i++) { var a = document.createElement('a'); a.href = '#'; a.appendChild(document.createTextNode('test' + i)); frag.appendChild(a); } document.getElementById('container').appendChild(frag); return false; }
  • 23. DOM 사용을 최소화하여 Reflow 비용 줄이기(4) Case 3 : 노드 사본을 활용한 엘리먼트 추가 방법 function notReflow() { var elem = document.getElementById('container'); var clone = elem.cloneNode(true); for (var i = 0; i < 10; i++) { var a = document.createElement('a'); a.href = '#'; a.appendChild(document.createTextNode('test' + i)); clone.appendChild(a); } elem.appendChild(clone); return false; }
  • 24. DOM 사용을 최소화하여 Reflow 비용 줄이기(5) 상황별 테스트 결과:  Case 1 : 153ms  Case 2 : 136ms  Case 3 : 129ms