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

83
1371월요일

description

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

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

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

13년 7월 1일 월요일

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

JavaScript����������� ������������������  성능����������� ������������������  향상과Sencha

13년 7월 1일 월요일

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

한국커뮤니티데이(Korea����������� ������������������  Community����������� ������������������  Day)

Track����������� ������������������  2,����������� ������������������  Session����������� ������������������  21:50����������� ������������������  ~����������� ������������������  2:30

13년 7월 1일 월요일

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

김태원

13년 7월 1일 월요일

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

한국센차유저그룹부운영자

https://www.facebook.com/groups/korea.sencha

13년 7월 1일 월요일

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

SNS����������� ������������������  (Facebook)

https://www.facebook.com/mniktw

13년 7월 1일 월요일

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

주요활동

2012년����������� ������������������  마소기고•11월����������� ������������������  -����������� ������������������  Sencha����������� ������������������  Touch����������� ������������������  Class����������� ������������������  System•12월����������� ������������������  -����������� ������������������  Sencha.io����������� ������������������  (공동기고)

13년 7월 1일 월요일

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

http://me.kinotl.com

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

Table����������� ������������������  of����������� ������������������  Contents

성능이란����������� ������������������  무엇인가?

측정은����������� ������������������  어떻게?

개선하기����������� ������������������  전에...방법은?

Sencha����������� ������������������  Fastbook...

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

성능이란����������� ������������������  무엇인가?

1

13년 7월 1일 월요일

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

성능이란����������� ������������������  무엇인가?

정해진����������� ������������������  시간내에서����������� ������������������  처리할����������� ������������������  수����������� ������������������  있는����������� ������������������  일의����������� ������������������  양!

1

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

시간

13년 7월 1일 월요일

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

시간

처리한����������� ������������������  작업의����������� ������������������  양!

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

측정은����������� ������������������  어떻게?

외부의����������� ������������������  도구����������� ������������������  사용.벤치마크����������� ������������������  자작.

Unix,����������� ������������������  Linux����������� ������������������  $����������� ������������������  time����������� ������������������  ~����������� ������������������  커맨드.

2

13년 7월 1일 월요일

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

외부도구사용하기

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

jsPerf

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

BenchmarkCode

자작

13년 7월 1일 월요일

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

Benchamark.js

(function(ctx)����������� ������������������  {����������� ������������������   'use����������� ������������������  strict'����������� ������������������   var����������� ������������������  Benchmark����������� ������������������  =����������� ������������������  ctx.Benchmark����������� ������������������  ||����������� ������������������  {};����������� ������������������   Benchmark.run����������� ������������������  =����������� ������������������  function(func)����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  begin����������� ������������������  =����������� ������������������  0,����������� ������������������  end����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   if(Object.prototype.toString.call(func)����������� ������������������  !==����������� ������������������  '[object����������� ������������������  Function]')����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   return;����������� ������������������   ����������� ������������������   }����������� ������������������   ����������� ������������������   try����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   begin����������� ������������������  =����������� ������������������  new����������� ������������������  Date();����������� ������������������   ����������� ������������������   ����������� ������������������   console.log(����������� ������������������  'Start����������� ������������������  =����������� ������������������  '����������� ������������������  +����������� ������������������  tbegin����������� ������������������  );����������� ������������������   ����������� ������������������   ����������� ������������������   func.apply(����������� ������������������  this,����������� ������������������  arguments����������� ������������������  );����������� ������������������   ����������� ������������������   }����������� ������������������  finally����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   end����������� ������������������  =����������� ������������������  new����������� ������������������  Date();����������� ������������������   ����������� ������������������   ����������� ������������������   console.log(����������� ������������������  'End����������� ������������������  =����������� ������������������  '����������� ������������������  +����������� ������������������  end����������� ������������������  );����������� ������������������   ����������� ������������������   ����������� ������������������   console.log(����������� ������������������  'Elapsed����������� ������������������  =����������� ������������������  '����������� ������������������  +����������� ������������������  (end����������� ������������������  -����������� ������������������  begin)����������� ������������������  );����������� ������������������   ����������� ������������������   ����������� ������������������   return;����������� ������������������   ����������� ������������������   }����������� ������������������   }})(this);

13년 7월 1일 월요일

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

<script����������� ������������������  type="text/javascript"����������� ������������������  src="Benchamark.js"></script>

index.html

13년 7월 1일 월요일

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

<script����������� ������������������  type="text/javascript">����������� ������������������   (function()����������� ������������������  {����������� ������������������   ����������� ������������������   Benchemark.run(function()����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   //����������� ������������������  TODO:����������� ������������������  여기에����������� ������������������  코드를����������� ������������������  작성하세요.����������� ������������������  ����������� ������������������   ����������� ������������������   });����������� ������������������   })();</script>

index.html

13년 7월 1일 월요일

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

Unix,Linux$����������� ������������������  time����������� ������������������  ~

커맨드를����������� ������������������  활용하자.

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  display1.js

real����������� ������������������   0m0.391suser����������� ������������������   0m0.374ssys����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  0m0.018s

terminal

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  display1.js

real����������� ������������������   0m0.391suser����������� ������������������   0m0.374ssys����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  0m0.018s

terminal

-����������� ������������������  프로그램이����������� ������������������  시작되고����������� ������������������  종료된����������� ������������������  시간.-����������� ������������������  사용자����������� ������������������  모드에서����������� ������������������  CPU를����������� ������������������  사용된����������� ������������������  시간.-����������� ������������������  커널����������� ������������������  모드에서����������� ������������������  CPU를����������� ������������������  사용된����������� ������������������  시간.

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

jsperf와����������� ������������������  같은����������� ������������������  외부����������� ������������������  툴����������� ������������������  사용.

벤치마크����������� ������������������  코드를����������� ������������������  직접����������� ������������������  작성.

����������� ������������������  유닉스,����������� ������������������  리눅스에����������� ������������������  포함된����������� ������������������  $����������� ������������������  time����������� ������������������  커맨드

결론

13년 7월 1일 월요일

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

jsperf와����������� ������������������  같은����������� ������������������  외부����������� ������������������  툴����������� ������������������  사용.

벤치마크����������� ������������������  코드를����������� ������������������  직접����������� ������������������  작성.

����������� ������������������  유닉스,����������� ������������������  리눅스에����������� ������������������  포함된����������� ������������������  $����������� ������������������  time����������� ������������������  커맨드

시간이����������� ������������������  얼마나����������� ������������������  걸리는가눈으로����������� ������������������  확인하자!

결론

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

개선하기����������� ������������������  전에...데이터의����������� ������������������  양이����������� ������������������  어느����������� ������������������  정도인가?알고리즘����������� ������������������  효율이����������� ������������������  어떠한가?엔진의����������� ������������������  이해도가����������� ������������������  높은가?

시스템����������� ������������������  구조에����������� ������������������  대한����������� ������������������  이해가����������� ������������������  높은가?코드����������� ������������������  길이가����������� ������������������  짧다고����������� ������������������  빠르지����������� ������������������  않다?

3

13년 7월 1일 월요일

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

JavaScript����������� ������������������  성능은?

13년 7월 1일 월요일

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

JavaScript����������� ������������������  성능은?

SlowC/C++����������� ������������������  보다

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

방법은?

데이터의����������� ������������������  양이����������� ������������������  어느����������� ������������������  정도인가?알고리즘����������� ������������������  효율이����������� ������������������  어떠한가?엔진의����������� ������������������  이해도가����������� ������������������  높은가?

시스템����������� ������������������  구조에����������� ������������������  대한����������� ������������������  이해가����������� ������������������  높은가?코드����������� ������������������  길이가����������� ������������������  짧다고����������� ������������������  빠르지����������� ������������������  않다?

4

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

100개의����������� ������������������  데이터1000개의����������� ������������������  데이터

.

.

.

13년 7월 1일 월요일

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

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  Benchee����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [],����������� ������������������  sum����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  100;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  i;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  100;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  +=����������� ������������������  array[i];����������� ������������������   };

����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   Benchee();})();

JavaScript(function()����������� ������������������  {����������� ������������������   var����������� ������������������  Benchee����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [],����������� ������������������  sum����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  i;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  +=����������� ������������������  array[i];����������� ������������������   };

����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   Benchee();})();

JavaScript

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  SumEx1.js

real����������� ������������������  0m0.484suser����������� ������������������  0m0.473ssys����������� ������������������   0m0.014s

$����������� ������������������  time����������� ������������������  node����������� ������������������  SumEx2.js

real����������� ������������������  0m3.310suser����������� ������������������  0m3.305ssys����������� ������������������   0m0.039s

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

JavaScript JavaScript

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  indexOf����������� ������������������  =����������� ������������������  function(array,����������� ������������������  value)����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  result����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  array.length;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   if(array[i]����������� ������������������  ===����������� ������������������  value)����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   result����������� ������������������  =����������� ������������������  i;����������� ������������������   ����������� ������������������   return����������� ������������������  result;����������� ������������������   }����������� ������������������   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����������� ������������������  );})();

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  indexOf����������� ������������������  =����������� ������������������  function(array,����������� ������������������  value)����������� ������������������  {����������� ������������������   ����������� ������������������   for(var����������� ������������������  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����������� ������������������  );})();})();

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  indexOf1.js����������� ������������������  

real����������� ������������������  0m0.605suser����������� ������������������  0m0.593ssys����������� ������������������   0m0.013s

$����������� ������������������  time����������� ������������������  node����������� ������������������  indexOf2.js����������� ������������������  

real����������� ������������������  0m0.066suser����������� ������������������  0m0.056ssys����������� ������������������   0m0.009s

13년 7월 1일 월요일

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

버블정렬과����������� ������������������  퀵정렬의����������� ������������������  반복����������� ������������������  횟수

차이!

13년 7월 1일 월요일

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

반복����������� ������������������  횟수를����������� ������������������  줄여라.

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

JavaScript JavaScript

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  initArray����������� ������������������  =����������� ������������������  function(array)����������� ������������������  {����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  array[i]����������� ������������������  +����������� ������������������  i;����������� ������������������   }����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [];����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   initArray(����������� ������������������  array����������� ������������������  );})();

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  initArray����������� ������������������  =����������� ������������������  function(array)����������� ������������������  {����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  array[i]����������� ������������������  +����������� ������������������  i;����������� ������������������   }����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [];����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  0;����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   initArray(����������� ������������������  array����������� ������������������  );})();

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  initValue1.js����������� ������������������  

real����������� ������������������  0m3.592suser����������� ������������������  0m3.581ssys����������� ������������������   0m0.035s

$����������� ������������������  time����������� ������������������  node����������� ������������������  initValue2.js����������� ������������������  

real����������� ������������������  0m0.534suser����������� ������������������  0m0.524ssys����������� ������������������   0m0.012s

13년 7월 1일 월요일

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

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  Benchee����������� ������������������  =����������� ������������������  function(array)����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  sum����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  array.length;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  =����������� ������������������  sum����������� ������������������  +����������� ������������������  array[i];����������� ������������������   }����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [];����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  i;����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   Benchee(����������� ������������������  array����������� ������������������  );})()

JavaScript

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  Benchee����������� ������������������  =����������� ������������������  function(array)����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  sum����������� ������������������  =����������� ������������������  0,����������� ������������������  size����������� ������������������  =����������� ������������������  array.length;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  size;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  =����������� ������������������  sum����������� ������������������  +����������� ������������������  array[i];����������� ������������������   }����������� ������������������   var����������� ������������������  array����������� ������������������  =����������� ������������������  [];����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   array[i]����������� ������������������  =����������� ������������������  i;����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   Benchee(����������� ������������������  array����������� ������������������  );})()

JavaScript

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

JavaScript JavaScript

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  sumArray����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  sum����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  =����������� ������������������  sum����������� ������������������  +����������� ������������������  1;����������� ������������������   ����������� ������������������   return����������� ������������������  sum;����������� ������������������   }����������� ������������������   var����������� ������������������  result����������� ������������������  =����������� ������������������  0;����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   result����������� ������������������  =����������� ������������������  sumArray(����������� ������������������  ����������� ������������������  );����������� ������������������   console.log(result);})();

(function()����������� ������������������  {����������� ������������������   var����������� ������������������  sumArray����������� ������������������  =����������� ������������������  function()����������� ������������������  {����������� ������������������   ����������� ������������������   var����������� ������������������  sum����������� ������������������  =����������� ������������������  0;����������� ������������������   ����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  1000;����������� ������������������  i++)����������� ������������������   ����������� ������������������   ����������� ������������������   sum����������� ������������������  =����������� ������������������  sum����������� ������������������  +����������� ������������������  1;����������� ������������������   ����������� ������������������   return����������� ������������������  sum;����������� ������������������   }����������� ������������������   var����������� ������������������  result����������� ������������������  =����������� ������������������  0;����������� ������������������   for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  200000;����������� ������������������  i++)����������� ������������������  {����������� ������������������   ����������� ������������������   result����������� ������������������  =����������� ������������������  sumArray(����������� ������������������  ����������� ������������������  );����������� ������������������   ����������� ������������������   console.log(result);����������� ������������������   }})();

13년 7월 1일 월요일

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

$����������� ������������������  time����������� ������������������  node����������� ������������������  display1.js1000

real����������� ������������������  0m0.391suser����������� ������������������  0m0.374ssys����������� ������������������   0m0.018s

$����������� ������������������  time����������� ������������������  node����������� ������������������  display2.js1000...1000����������� ������������������  숫자가����������� ������������������  20만번...real����������� ������������������  0m4.863suser����������� ������������������  0m4.204ssys����������� ������������������   0m0.685s

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

Breaking����������� ������������������  the����������� ������������������  JavaScript����������� ������������������  Speed����������� ������������������  Limit����������� ������������������  with����������� ������������������  V8

http://www.youtube.com/watch?feature=player_embedded&v=UJPdhx5zTaw#!

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

CPP����������� ������������������  vs����������� ������������������  JavaScript����������� ������������������  (V8)

13년 7월 1일 월요일

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

14초����������� ������������������  걸리던����������� ������������������  코드...

CPP����������� ������������������  vs����������� ������������������  JavaScript����������� ������������������  (V8)

13년 7월 1일 월요일

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

CPP����������� ������������������  vs����������� ������������������  JavaScript����������� ������������������  (V8)

0.1초

13년 7월 1일 월요일

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

CPP����������� ������������������  vs����������� ������������������  JavaScript����������� ������������������  (V8)

0.1초

13년 7월 1일 월요일

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

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

JavaScript는����������� ������������������  느리다.

데이터����������� ������������������  양을����������� ������������������  제한.

효율적인����������� ������������������  알고리즘����������� ������������������  선택.

부당한����������� ������������������  처리를����������� ������������������  피함.

결론

13년 7월 1일 월요일

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

JavaScript는����������� ������������������  느리다.

데이터����������� ������������������  양을����������� ������������������  제한.

효율적인����������� ������������������  알고리즘����������� ������������������  선택.

부당한����������� ������������������  처리를����������� ������������������  피함.

빠르게����������� ������������������  실행될����������� ������������������  수����������� ������������������  있다.

결론

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

Sencha����������� ������������������  Fastbook

5

13년 7월 1일 월요일

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

2012년����������� ������������������  9월����������� ������������������  11일

TechCrunch Distrupt 20

13년 7월 1일 월요일

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

Mark����������� ������������������  Zuckerberg

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

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

http://fb.html5isready.com

13년 7월 1일 월요일

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

13년 7월 1일 월요일

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

http://goo.gl/Lm3Ah

13년 7월 1일 월요일

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

Question����������� ������������������  and����������� ������������������  

Answer

13년 7월 1일 월요일

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

감사합니다.

13년 7월 1일 월요일