2014년2월 웹클라이언트개발환경에...
TRANSCRIPT
![Page 1: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/1.jpg)
자바스크립트 성능 최적화 기법- 한국마이크로소프트 기술지원부 이진헌 과장
2014년 2월웹클라이언트개발환경에풍성함을더하다!
![Page 2: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/2.jpg)
성능 문제의 배경
성능 문제의 대표적인 증상
자바스크립트 실행 환경의 이해
최적화 방식 소개
![Page 3: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/3.jpg)
![Page 4: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/4.jpg)
각 브라우저의 자바스크립트 성능 비교빠른브라우저는프론트앤드웹개발분야의발전기반
26x Faster
![Page 5: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/5.jpg)
자바스크립트의 양적 증가 추세전세계웹사이트를구성하는평균자바스크립트크기
출처:httparchive.org
• 3년간 2배 이상증가
• 평균을 크게상회하는웹사이트가 증가
![Page 6: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/6.jpg)
다양한 브라우저 버전 점유율Modern browser vs. Legacy browser (한국)
출처:statcounter.com
IE8 34.1%
IE9 21.8%
Chrome 20%
IE10 16.3%
![Page 7: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/7.jpg)
![Page 8: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/8.jpg)
![Page 9: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/9.jpg)
![Page 10: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/10.jpg)
![Page 11: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/11.jpg)
ZZZZZZ
![Page 12: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/12.jpg)
![Page 13: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/13.jpg)
![Page 14: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/14.jpg)
Windows Performance ToolkitXperf
IE11 - F12 Developer toolUI Responsiveness
![Page 15: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/15.jpg)
Networking Parsing
Loading
1
2 7
43 8 9
5 6
DOM
Tree
Formatting Layout
ScriptingScripting
GC
Styling
1
2 7
43 8 9
5 6
Display Tree
Painting
Rendering
Compositing
Decoding
![Page 16: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/16.jpg)
http://ie.microsoft.com/testdrive/Performance/Popcorn/
![Page 17: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/17.jpg)
![Page 18: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/18.jpg)
단일 쓰레드
단일 이벤트 큐
• DOM
• 레이아웃
• Native code
코드를 최적화
![Page 19: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/19.jpg)
(예외: Web Worker)
loadevent
page loadevent handler
timerevent
timer
EH
timerevent
timer
EH
timerevent
timer
EH
clickevent
mouse clickevent handler
timerevent
timerevent
timer
EH
timerevent
timer
EH
timer
EH
timerevent
![Page 20: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/20.jpg)
UI Update(Button)
Event Handler(click)
Event Handler(click)
Event Handler(Timer)
UI Update(Button)
Event Handler(click)
Event Handler(Timer)
UI Thread
Event Queue
![Page 21: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/21.jpg)
• 루프문에서는 DOM 메소드 호출을 최소화
• DOM을 조작하는 작업은 모아서 한 번에 처리
![Page 22: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/22.jpg)
<div>
<div> <div> <div> <div>
<div>
<div> <div> <div>
<div>
Reflow
<div>
<div> <div> <div> <div>
<div>
<div> <div> <div> <div>Repaint
![Page 23: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/23.jpg)
![Page 24: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/24.jpg)
![Page 25: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/25.jpg)
vs.
31 bits
Object pointer1 bit
032 bits
32 bits
Floats32-bit
Integers
31 bits
31-bit (tagged) Integers1 bit
1
STACK HEAP
IEEE 64비트 부동소수점을 표현하는Wrapper Object
STACK
![Page 26: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/26.jpg)
vs.
function doMath() {var a = 5;var b = 2;r = ((a + b) / 2); // 3.5
}var intR = Math.floor(r);
function doMath() {var a = 5;var b = 2;r = ((a + b) / 2) | 0; // 3r = Math.round((a + b) / 2); // 4
}
SLOW FAST
0x005e4148r: Number
3.5
STACK HEAP
0x00000007r:
0x00000009r:
STACK
![Page 27: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/27.jpg)
var a = new Array(10000);
for (var i = 0; i < a.length; i++) {a[i] = i;
}a[9999] = “str”;
var a = new Array(10000);
a[0] = “hint”;for (var i = 0; i < a.length; i++) {a[i] = i;
}a[9999] = “str”;
SLOW FAST
1
var a = new Array();
a[0] = 1;a[1] = 2.3;a[2] = “str”;
1 2.3
1 2.3 “str”
![Page 28: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/28.jpg)
var value = 5;
var a = new Array(100);a[0] = value; // 5 - taggeda[1] = value / 2; // 2.5 - boxeda[2] = "text"; // "text" - var array
var value = 5;
var a = new Float64Array(100);a[0] = value; // 5 - no tagging requireda[1] = value / 2; // 2.5 - no boxing requireda[2] = "text"; // 0
var a = new Int32Array(100);a[0] = value; // 5 - no tagging requireda[1] = value / 2; // 2 - no tagging requireda[2] = "text"; // 0
SLOW FAST
![Page 29: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/29.jpg)
var a = new Array(100);var total = 0;
for (var item in a) {total += item;
};
a.forEach(function(item){total += item;
});
for (var i = 0; i < a.length; i++) { total += a[i];
}
var a = new Array(100);var total = 0;var cachedLength = a.length;
for (var i = 0; i < cachedLength; i++) { total += a[i];
}
SLOW FAST
![Page 30: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/30.jpg)
![Page 31: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/31.jpg)
64xFaster
![Page 32: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/32.jpg)
![Page 33: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/33.jpg)
전세계 jQuery 점유율 통계
jQuery
none
![Page 34: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/34.jpg)
![Page 35: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/35.jpg)
$("#grid span.title") $("#grid").find("span.title")
WORSE BETTER
$("div#grid table tr td span.title") $("#grid span.title")
$("div.data .person").attr({"width": 500, "height": 500})
$("div.data .person").attr("width", 500)$("div.data .person").attr("height", 500)
$("[name='baz']")$(":hidden")
$("#bazid")$(".hidden")
![Page 36: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/36.jpg)
vs.
var html = $('<div/>');
for (var i = 0; i < len; i++) {html.append($('<div>Test ' + i + '</div>'));
}
$('#list').append(html);
var list = document.getElementById('list');var div = document.createElement('div');
for (var i = 0; i < len; i++) {div.appendChild(document.createTextNode('Test ' + i));
}
list.appendChild(div);
SLOW? FAST?
http://jsperf.com/jquery-append-vs-html-list-performance/77
![Page 37: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/37.jpg)
vs.
48xFaster
![Page 38: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/38.jpg)
$('table td').click(function() {$(this).toggleClass('active');
});
$('table').on('click', 'td', function() {$(this).toggleClass('active');
});
SLOW FAST
http://jsperf.com/jquery-event-delegation/5
<table>
<tr><td></td>...<td></td></tr>
<tr><td></td>...<td></td></tr>
...
<tr><td></td>...<td></td></tr>
</table>
![Page 39: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/39.jpg)
<table>
<tr>
<td> <td>
<td> <td>
//jQuery$('table').on('click', 'td', function() {$(this).toggleClass('active');
});
//pure javascripttable.onclick = function(event) {event = event || window.event;var target = event.target ||
event.srcElement;while(target != table) {if (target.nodeName == 'TD') {
toggleClass(target);}target = target.parentNode;
}}
![Page 40: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/40.jpg)
20xFaster
![Page 41: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/41.jpg)
![Page 42: 2014년2월 웹클라이언트개발환경에 풍성함을더하다pds26.egloos.com/.../Javascript_Optimization_Techniques.pdf · 2016. 2. 22. · 자바스크립트성능최적화기법](https://reader034.vdocuments.pub/reader034/viewer/2022051920/600d33a30fcfc7011b2fe138/html5/thumbnails/42.jpg)