한국 커뮤니티 데이 트랙2, 세션2 JavaScript 성능향상과 Sencha

627 views

Published on

한국 커뮤니티 데이 트랙2, 세션2 JavaScript 성능향상과 Sencha

발표자 김태원

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
627
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

한국 커뮤니티 데이 트랙2, 세션2 JavaScript 성능향상과 Sencha

  1. 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. 2. Table of Contents 성능이란 무엇인가 ? 측정은 어떻게 ? 개선하기 전에 ... 방법은 ? Sencha Fastbook...
  3. 3. 성능이란 무엇인가 ? 정해진 시간내에서 처리할 수 있는 일의 양 ! 1
  4. 4. 람보르기니 vs 마티즈 같은 직선 거리 , 경주를 한다 ??
  5. 5. 시간 처리한 작업의 양 !
  6. 6. 측정은 어떻게 ? 외부의 도구 사용 . 벤치마크 자작 . Unix, Linux $ time ~ 커맨드 . 2
  7. 7. 외부 도구 사용하기
  8. 8. jsPerf
  9. 9. Benchmark Code 자작
  10. 10. Benchamark.js function(func) { !== '[object Function]') { return; } try { begin = new Date(); console.log ' + (end - begin) ); return; } }})(this);
  11. 11. <script type="text/javascript" src="Benchamark.js"></script> index.html
  12. 12. tion() { Benchemark.run(function() { // TODO: 여기에 코 index.html
  13. 13. Unix,Linux $ time ~ 커맨드를 활용하자 .
  14. 14. me node display1.jsreal 0m0.391suser 0m0.374ssys 0m0.0 terminal - 프로그램이 시작되고 종료된 시간 . - 사용자 모드에서 CPU 를 사용된 시간 . - 커널 모드에서 CPU 를 사용된 시간 .
  15. 15. jsperf 와 같은 외부 툴 사용 . 벤치마크 코드를 직접 작성 . 유닉스 , 리눅스에 포함된 $ time 커맨드 시간이 얼마나 걸리는가 눈으로 확인하자 ! 결론
  16. 16. 개선하기 전에 ... 데이터의 양이 어느 정도인가 ? 알고리즘 효율이 어떠한가 ? 엔진의 이해도가 높은가 ? 시스템 구조에 대한 이해가 높은가 ? 코드 길이가 짧다고 빠르지 않다 ? 3
  17. 17. JavaScript 성능은 ? Slow C/C++ 보다
  18. 18. 엄지 발가락으로 짠 C/C++ 코드 보다 JavaScript 가 느리다 .
  19. 19. 브라우저에 포함된 자바스크립트 엔진에 따라 다른 결과 ...
  20. 20. 방법은 ? 데이터의 양이 어느 정도인가 ? 알고리즘 효율이 어떠한가 ? 엔진의 이해도가 높은가 ? 시스템 구조에 대한 이해가 높은가 ? 코드 길이가 짧다고 빠르지 않다 ? 4
  21. 21. 데이터의 양이 어느 정도인가 ?
  22. 22. 100 개의 데이터 1000 개의 데이터 . . .
  23. 23. = 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
  24. 24. $ time node SumEx1.jsreal0m0.484suser 0m0.473ssys 0m0.014s$ time node SumEx2.jsreal0m3.310suser 0m3.305ssys 0m0.039s
  25. 25. 알고리즘 효율이 어떠한가 ?
  26. 26. 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 );})();})();
  27. 27. $ 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
  28. 28. 버블정렬과 퀵정렬의 반복 횟수 차이 !
  29. 29. 반복 횟수를 줄여라 .
  30. 30. 엔진의 이해도가 높은가 ? 시스템 구조에 대한 이해가 높은가 ?
  31. 31. 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 );})();
  32. 32. ime node initValue1.js real 0m3.592suser 0m3.581ssys 0m0.035s$ time node initValue2.js real 0m0.534suser 0m0.524ssys 0m0.0
  33. 33. 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
  34. 34. 화면 출력은 , 변수에 어떤 조작보다 항상 느리다 .
  35. 35. 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
  36. 36. 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
  37. 37. 내부 동작 매커니즘에서 부당한 처리를 피해라 !
  38. 38. Breaking the JavaScript Speed Limit with V8 http://www.youtube.com/watch?feature=player_embedded&v=UJPdhx5zTaw#!
  39. 39. 1 부터 25000 까지 소수 (Prime Number)
  40. 40. 14 초 걸리던 코드 ... CPP vs JavaScript (V8) 0.1 초
  41. 41. 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
  42. 42. JavaScript 는 느리다 . 데이터 양을 제한 . 효율적인 알고리즘 선택 . 부당한 처리를 피함 . 빠르게 실행될 수 있다 . 결론
  43. 43. Sencha Fastbook 5
  44. 44. 2012 년 9 월 11 일 TechCrunch Distrupt 20
  45. 45. Mark Zuckerberg “지난 2 년간 가장 큰 실수는 네이티브 앱 대신에 HTML5 에 너무 많이 주력 (Betting) 했다는 것이라 생각한다 ”
  46. 46. http://fb.html5isready.com
  47. 47. http://goo.gl/Lm3Ah
  48. 48. Questionand Answer
  49. 49. 감사합니다 .

×