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

83
1371월요일

Upload: mniktw

Post on 24-Jun-2015

362 views

Category:

Documents


3 download

DESCRIPTION

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

TRANSCRIPT

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일 월요일