[PHPFest 2013] High performance Javascript
-
Upload
phpkorea -
Category
Technology
-
view
368 -
download
1
description
Transcript of [PHPFest 2013] High performance Javascript
![Page 1: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/1.jpg)
High Perfor-manceJavaScript
2013. 10. 12 김지한
![Page 2: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/2.jpg)
성능을 생각하는 자바스크립트= 어떻게 하면 조금 더 빠를까 ?
Hig
hPe
rfor
man
ce
Java
Scr
ipt
![Page 3: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/3.jpg)
우리는 어떤 것을 ‘ 성능이 좋다’고 하는가 ?
![Page 4: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/4.jpg)
빠르다 가볍다느리다 무겁다
기준이 뭔가요 ?
![Page 5: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/5.jpg)
처리속도 , 메모리 소비와 반환화면의 깜빡임
사용자 행동에 대한 반응속도
다 종합해서 ‘성능’
![Page 6: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/6.jpg)
변수할당은 반복문 바깥에서
var a = [1,2,3,4];
for(i=0; i<a.length; i++){ var test = 1;}
var a = [1,2,3,4];var test;var len = a.length;
for(i=0; i<len; i++){ test = i+1;}
![Page 7: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/7.jpg)
Closure 와는 비용을 비교해서
var a = [1,2,3,4,5,6];var b;
a.forEach(function(n){ b = n % 2;});
var a = [1,2,3,4,5,6];
a.forEach(function(n){ var b = n % 2;});
<
http://jindo.dev.naver.com/jsMatch/?d=77&openResult=1
![Page 8: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/8.jpg)
Scope 는 가능한 적게
with(document){ var el = createElement("div"); }
꼭 필요한 경우가 아니면 with 구문 사용은 자제
![Page 9: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/9.jpg)
Scope 는 가능한 적게
var elDiv = htElement.htDivs.elDiv;
elDiv.innerHTML = “Hello World”;
변수 Scope 가 길어지면 로컬 변수로 캐시해서 사용이 방법은 코드 압축시의 효과도 높여줍니다
![Page 10: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/10.jpg)
정규식 선언은 한 번만
for(i=0; i<10; i++){ aLines[i] = aLines[i].replace(/.[\r|\n]+/, ‘’);}
var rxCRLF = /.[\r|\n]+/;for(i=0; i<10; i++){ aLines[i] = aLines[i].replace(rxCRLF, ‘’);}
![Page 11: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/11.jpg)
Selector 탐색 비용 최소화
getElementByIdgetElementsByTagNamegetElementsByClassName
http://jindo.dev.naver.com/jsMatch/?d=86&openResult=1
![Page 12: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/12.jpg)
Selector 탐색 비용 최소화
탐색 범위는 좁고 정확할 수록 좋다당연히 더 많은 범위를 찾을 때 더 오래 걸린다
// jQuery$(“.test”); $(“#container”).find(“.test”);
// JindoJS$$(“.test”); $Element(“container”).queryAll(“.test”);
![Page 13: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/13.jpg)
이벤트 핸들러는 영역 단위로
이벤트 핸들러는 메모리를 소모한다
버블링 (Bubbling) 을 활용하자
![Page 14: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/14.jpg)
이벤트 핸들러는 영역 단위로
<ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li></ul>
$(“.a”).click(function(){ … });$(“.b”).click(function(){ … });
![Page 15: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/15.jpg)
이벤트 핸들러는 영역 단위로
<ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li></ul>
$(“#list”).click(function(weEvt){ if($(weEvt.target).hasClass(“a”)){ … }});
![Page 16: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/16.jpg)
이벤트 발생 순서
domready > loadtouchstart > clickmousedown > click
더 먼저 발생하는 이벤트를 활용할 수 있다면 그 이벤트를 활용하라
![Page 17: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/17.jpg)
GC
GC(Garbage Collector) 에 의해 제거되도록 하기 위해서는
사용하지 않는 것에 대해서는 참조를 유지하지 말아야 한다 .
사용하지 않는 참조를 null 로 !
![Page 18: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/18.jpg)
쿠키 ? 로컬스토리지 ?Cookie:csrftoken=mRiN2QGk8kq9rfDOLTwVrtzPov0pLVhm; __utma=45159731.192530165.1376983091.1376983091.1380583980.2; __utmz=45159731.1380583980.2.2.utmcsr=stackoverflow.com|utmccn=(referral)|utmcmd=referral|utmcct=/questions/7085454/extract-keyphrases-from-text-1-4-word-ngrams
이런 걸 매번 달고 다닌다고 생각해보세요
![Page 19: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/19.jpg)
쿠키 ? 로컬스토리지 ?
HTTP 헤더도 다이어트가 필요합니다
document.cookie window.localStorage
![Page 20: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/20.jpg)
http://caniuse.com/namevalue-storage
![Page 21: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/21.jpg)
네트워크 이야기 나온 김에…
네트워크 접속 횟수는 가능한 적게 !
HTTP Connection 할 때마다 기본적으로 소요되는 수백 ms무시 못 합니다 ( 특히 모바일 )
![Page 22: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/22.jpg)
문자열 합치기에는 배열 활용
var a = “”;
for(i=0; i<10; i++){ a += “a”;}
var a = [];
for(i=0; i<10; i++){ a.push(“a”)}a.join(“”);
Array(11).join(“a”);
무조건은 아니고 , HTML 같이 긴 문자열 연산시 !
![Page 23: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/23.jpg)
less DOM Manipulation
DOM 조작 때 마다 브라우저는 화면을 새로 그리려고
한다
깜빡임과 성능 저하의 주범
![Page 24: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/24.jpg)
Repaint: Element Visibility 변화시 , 레이아웃 자체를 변화하지는 않는 경우(outline, visibility, 배경색 ) DOM Tree 내에 존재하는 모든 노드의 Visibility 를 다 새로 검사하므로 상당히 비싼 작업
Reflow:전체 페이지 자체의 레이아웃이 변화하는 경우(appendChild, removeChild … )
less DOM Manipulation
![Page 25: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/25.jpg)
<ul id=“list”></ul>
for(i=0;i<100;i++){ $(“#list”).append($(“<li>”).text(i));}
less DOM Manipulation
http://jindo.dev.naver.com/jsMatch/?d=87&openResult=1
![Page 26: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/26.jpg)
<ul id=“list”></ul>
var a = [];for(i=0;i<100;i++){ a.push(“<li>” + i + “</li>”);}$(“#list”).html(a.join(“”));
less DOM Manipulation
http://jindo.dev.naver.com/jsMatch/?d=87&openResult=1
![Page 27: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/27.jpg)
그러므로 …
여러분은 appendChild 보다 innerHTML 을 가까이 하는 것이 낫습니다
less DOM Manipulation
![Page 28: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/28.jpg)
성능 측정 , 비교 도구
![Page 29: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/29.jpg)
jsMatchhttp://jsmatch.com/
jsPerfhttp://jsperf.com/
![Page 30: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/30.jpg)
DynaTracehttp://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html
Yahoo! Yslowhttp://developer.yahoo.com/yslow/
![Page 31: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/31.jpg)
DynaTracehttp://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html
Yahoo! Yslowhttp://developer.yahoo.com/yslow/
![Page 32: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/32.jpg)
Chrome 개발자도구
![Page 33: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/33.jpg)
결론
![Page 34: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/34.jpg)
가랑비에 옷 젖는 줄 모른다
가늘게 내리는 비는 조금씩 젖어 들기 때문에 여간해서도 옷이 젖는 줄을
깨닫지 못한다는 뜻으로 , 아무리 사소한 것이라도 그것이 거듭되면
무시하지 못할 정도로 크게 됨을 비유적으로 이르는 말 ( 국립국어원 )
![Page 35: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/35.jpg)
![Page 36: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/36.jpg)
브라우저 마다 조금씩 다르고같은 브라우저도 버전마다 조금씩 다르지만
중요한 건
이런 요소들을 고려하는 습관
![Page 37: [PHPFest 2013] High performance Javascript](https://reader035.fdocuments.net/reader035/viewer/2022062616/54945242b479596a4d8b4aa4/html5/thumbnails/37.jpg)
감사합니다Thank you