한국 커뮤니티 데이 트랙2, 세션2 JavaScript 성능향상과 Sencha 발표자 김태원

1. 주요활동
2012 년 마소기고
•11 월 - Sencha Touch Class System
•12 월 - Sencha.io ( 공동기고 )
JavaScript 성능 향상과
Sencha
한국커뮤니티데이
(Korea Community Day)
Track 2, Session 2
1:50 ~ 2:30
김태원한국센차유저그룹
부운영자
SNS (Facebook)
https://www.facebook.com/mniktw
https://www.facebook.com/groups/korea.senchahttp://me.kinotl.com

2. Table of Contents
성능이란 무엇인가 ?
측정은 어떻게 ?
개선하기 전에 ...
방법은 ?
Sencha Fastbook...

3. 성능이란 무엇인가 ?
정해진 시간내에서 처리할 수 있는 일의 양 !
1

4. 람보르기니 vs 마티즈
같은 직선 거리 , 경주를 한다 ??

5. 시간
처리한 작업의 양 !

6. 측정은 어떻게 ?
외부의 도구 사용 .
벤치마크 자작 .
Unix, Linux $ time ~ 커맨드 .
2

7. 외부
도구
사용하기

8. jsPerf

9. Benchmark
Code
자작

10. Benchamark.js
function(func) {
!== '[object Function]') { return; } try { begin = new Date(); console.log
' + (end - begin) ); return; } }})(this);

11. <script type="text/javascript" src="Benchamark.js"></script>
index.html

12. tion() { Benchemark.run(function() { // TODO: 여기에 코
index.html

13. Unix,Linux
$ time ~
커맨드를 활용하자 .

14. me node display1.jsreal 0m0.391suser 0m0.374ssys 0m0.0
terminal
- 프로그램이 시작되고 종료된 시간 .
- 사용자 모드에서 CPU 를 사용된 시간 .
- 커널 모드에서 CPU 를 사용된 시간 .

15. jsperf 와 같은 외부 툴 사용 .
벤치마크 코드를 직접 작성 .
유닉스 , 리눅스에 포함된
$ time 커맨드
시간이 얼마나 걸리는가
눈으로 확인하자 !
결론

16. 개선하기 전에 ...
데이터의 양이 어느 정도인가 ?
알고리즘 효율이 어떠한가 ?
엔진의 이해도가 높은가 ?
시스템 구조에 대한 이해가 높은가 ?
코드 길이가 짧다고 빠르지 않다 ?
3

17. JavaScript 성능은 ?
Slow
C/C++ 보다

18. 엄지 발가락으로 짠 C/C++ 코드 보다
JavaScript 가 느리다 .

19. 브라우저에 포함된
자바스크립트 엔진에 따라 다른 결과 ...

22. 방법은 ?
데이터의 양이 어느 정도인가 ?
알고리즘 효율이 어떠한가 ?
엔진의 이해도가 높은가 ?
시스템 구조에 대한 이해가 높은가 ?
코드 길이가 짧다고 빠르지 않다 ?
4

23. 데이터의 양이 어느 정도인가 ?

24. 100 개의 데이터
1000 개의 데이터
.
.
.

25. = 0; i < 100; i++) array[i] = i; for(var i = 0; i < 100; i++) sum += array[i];
JavaScript
var array = [], sum = 0; for(var i = 0; i < 1000; i++) array[i] = i; for(va
ee();})();
ee();})();
JavaScript

26. $ time node SumEx1.jsreal0m0.484suser 0m0.473ssys 0m0.014s$ time node SumEx2.jsreal0m3.310suser 0m3.305ssys 0m0.039s

27. 알고리즘 효율이 어떠한가 ?

28. JavaScript JavaScript
if(array[i] === value) result = i; return result; } var array = []; for(var i = 0; i < 1000; i++) array
200000; i++) result = indexOf( array, 1 );})();
200000; i++) result = indexOf( array, 1 );})();
i = 0; i < array.length; i++) if(array[i] === value) return i; } var array = []; for(var i = 0; i < 1000; i
array[i] = i; var result = 0; for(var i = 0; i < 200000; i++) result = indexOf( array, 1 );})();})();
array[i] = i; var result = 0; for(var i = 0; i < 200000; i++) result = indexOf( array, 1 );})();})();

29. $ time node indexOf1.js real 0m0.605suser 0m0.593ssys 0m0.013s
real 0m0.605suser 0m0.593ssys 0m0.013s
$ time node indexOf2.js real 0m0.066suser 0m0.056ssys 0m0.009s
real 0m0.066suser 0m0.056ssys 0m0.009s

30. 버블정렬과 퀵정렬의 반복 횟수
차이 !

31. 반복 횟수를 줄여라 .

32. 엔진의 이해도가 높은가 ?
시스템 구조에 대한 이해가 높은가 ?

33. JavaScript JavaScript
ction(array) { for(var i = 0; i < 1000; i++)
ray[i] + i; } var array = []; for(var i = 0; i < 200000; i++) initArray( array );})();
r(var i = 0; i < 200000; i++) initArray( array );})();
r(var i = 0; i < 200000; i++) initArray( array );})();
(function() { var initArray = function(array) { for(var i = 0; i < 1000; i++) array[
for(var i = 0; i < 1000; i++) array[i] = 0; for(var i = 0; i < 200000; i++) initA
for(var i = 0; i < 200000; i++) initArray( array );})();
for(var i = 0; i < 200000; i++) initArray( array );})();
for(var i = 0; i < 200000; i++) initArray( array );})();

34. ime node initValue1.js real 0m3.592suser 0m3.581ssys 0m0.035s$ time node initValue2.js real 0m0.534suser 0m0.524ssys 0m0.0

35. ength; i++) sum = sum + array[i]; } var array = [];for(var i = 0; i < 1000; i++) array[i] = i;
JavaScript
sum = 0, size = array.length; for(var i = 0; i < size; i++) sum = sum + array[i]; } var array =
JavaScript

36. 화면 출력은 , 변수에 어떤 조작보다
항상 느리다 .

37. JavaScript JavaScript
; i < 1000; i++) sum = sum + 1; return sum; } var result = 0; for(var i = 0; i < 200000; i++) resvar sum = 0; for(var i = 0; i < 1000; i++) sum = sum + 1; return sum; } var res

38. ime node display1.js1000real0m0.391suser 0m0.374ssys 0m0.018s
$ time node display2.js1000...1000 숫 자 가 20 만 번 ...real 0m4.863sus
0m0.685s
real 0m4.863suser 0m4.204ssys 0m0.685s
real 0m4.863suser 0m4.204ssys 0m0.685s

39. 내부 동작 매커니즘에서
부당한 처리를 피해라 !

40. Breaking the JavaScript Speed Limit with V8
http://www.youtube.com/watch?feature=player_embedded&v=UJPdhx5zTaw#!

41. 1 부터 25000 까지 소수
(Prime Number)

42. 14 초 걸리던 코드 ...
CPP vs JavaScript (V8)
0.1 초

43. function Primes() { this.prime_count = 0;
this.primes = new Array(25000); this.getPrimeCount =
function() { return this.prime_count; }this.getPrime =
function(i) { return this.primes[i]; } this.addPrime =
function(i) { this.primes[this.prime_count+
+] = i; } this.isPrimeDivisible =
function(candidate) { for (var i = 1; i <=
this.prime_count; i++) {
if((candidate % this.primes[i]) == 0)
return true; } return
false; }};function main() { p = new Primes();
var c = 1; while(p.getPrimeCount() < 25000) {
if (!p.isPrimeDivisible(c))
p.addPrime(c); c++; }
console.log(p.getPrime(p.getPrimeCount() - 1));}main();
function Primes() { this.prime_count = 0; this.primes
= new Array(25000); this.getPrimeCount = function() { return
this.prime_count; } this.getPrime = function(i) { return
this.primes[i]; } this.addPrime = function(i) {
this.primes[this.prime_count++] = i; }
this.isPrimeDivisible = function(candidate) {
for (var i = 1; i <= this.prime_count; i++) {
var current_prime = this.primes[i]; if
(current_prime * current_prime > candidate)
return false; if( (candidate
% current_prime) == 0)
return true; } return false;
}};function main() { p = new Primes(); var c = 1;
while(p.getPrimeCount() < 25000) { if
(!p.isPrimeDivisible(c))
p.addPrime(c); c++; }
console.log(p.getPrime(p.getPrimeCount() - 1));}main();
Prime1.js Prime2.js

44. JavaScript 는 느리다 .
데이터 양을 제한 .
효율적인 알고리즘 선택 .
부당한 처리를 피함 .
빠르게 실행될 수 있다 .
결론

45. Sencha Fastbook
5

46. 2012 년 9 월 11 일
TechCrunch Distrupt 20

47. Mark Zuckerberg
“지난 2 년간 가장 큰 실수는 네이티브 앱 대신에
HTML5 에 너무 많이 주력 (Betting) 했다는 것이라
생각한다
”

49. http://fb.html5isready.com

51. http://goo.gl/Lm3Ah

52. Questionand
Answer

53. 감사합니다 .