[PHPFest 2013] High performance Javascript

High Perfor-manceJavaScript

2013. 10. 12 김지한

성능을 생각하는 자바스크립트= 어떻게 하면 조금 더 빠를까 ?

Hig

hPe

rfor

man

ce

Java

Scr

ipt

우리는 어떤 것을 ‘ 성능이 좋다’고 하는가 ?

빠르다 가볍다느리다 무겁다

기준이 뭔가요 ?

처리속도 , 메모리 소비와 반환화면의 깜빡임

사용자 행동에 대한 반응속도

다 종합해서 ‘성능’

변수할당은 반복문 바깥에서

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;}

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

Scope 는 가능한 적게

with(document){ var el = createElement("div"); }

꼭 필요한 경우가 아니면 with 구문 사용은 자제

Scope 는 가능한 적게

var elDiv = htElement.htDivs.elDiv;

elDiv.innerHTML = “Hello World”;

변수 Scope 가 길어지면 로컬 변수로 캐시해서 사용이 방법은 코드 압축시의 효과도 높여줍니다

정규식 선언은 한 번만

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, ‘’);}

Selector 탐색 비용 최소화

getElementByIdgetElementsByTagNamegetElementsByClassName


Selector 탐색 비용 최소화

탐색 범위는 좁고 정확할 수록 좋다당연히 더 많은 범위를 찾을 때 더 오래 걸린다

// jQuery$(“.test”); $(“#container”).find(“.test”);

// JindoJS$$(“.test”); $Element(“container”).queryAll(“.test”);

이벤트 핸들러는 영역 단위로

이벤트 핸들러는 메모리를 소모한다

버블링 (Bubbling) 을 활용하자


<ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li></ul>

$(“.a”).click(function(){ … });$(“.b”).click(function(){ … });


<ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li></ul>

$(“#list”).click(function(weEvt){ if($(weEvt.target).hasClass(“a”)){ … }});

이벤트 발생 순서

domready > loadtouchstart > clickmousedown > click

더 먼저 발생하는 이벤트를 활용할 수 있다면 그 이벤트를 활용하라

GC

GC(Garbage Collector) 에 의해 제거되도록 하기 위해서는

사용하지 않는 것에 대해서는 참조를 유지하지 말아야 한다 .

사용하지 않는 참조를 null 로 !

쿠키 ? 로컬스토리지 ?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

이런 걸 매번 달고 다닌다고 생각해보세요

쿠키 ? 로컬스토리지 ?

HTTP 헤더도 다이어트가 필요합니다

document.cookie window.localStorage

http://caniuse.com/namevalue-storage

네트워크 이야기 나온 김에…

네트워크 접속 횟수는 가능한 적게 !

HTTP Connection 할 때마다 기본적으로 소요되는 수백 ms무시 못 합니다 ( 특히 모바일 )

문자열 합치기에는 배열 활용

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 같이 긴 문자열 연산시 !

less DOM Manipulation

DOM 조작 때 마다 브라우저는 화면을 새로 그리려고

한다

깜빡임과 성능 저하의 주범

Repaint: Element Visibility 변화시 , 레이아웃 자체를 변화하지는 않는 경우(outline, visibility, 배경색 ) DOM Tree 내에 존재하는 모든 노드의 Visibility 를 다 새로 검사하므로 상당히 비싼 작업

Reflow:전체 페이지 자체의 레이아웃이 변화하는 경우(appendChild, removeChild … )


<ul id=“list”></ul>

for(i=0;i<100;i++){ $(“#list”).append($(“<li>”).text(i));}



<ul id=“list”></ul>

var a = [];for(i=0;i<100;i++){ a.push(“<li>” + i + “</li>”);}$(“#list”).html(a.join(“”));



그러므로 …

여러분은 appendChild 보다 innerHTML 을 가까이 하는 것이 낫습니다


성능 측정 , 비교 도구

jsMatchhttp://jsmatch.com/

jsPerfhttp://jsperf.com/

DynaTracehttp://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

Yahoo! Yslowhttp://developer.yahoo.com/yslow/

DynaTracehttp://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

Yahoo! Yslowhttp://developer.yahoo.com/yslow/

Chrome 개발자도구

결론

가랑비에 옷 젖는 줄 모른다

가늘게 내리는 비는 조금씩 젖어 들기 때문에 여간해서도 옷이 젖는 줄을

깨닫지 못한다는 뜻으로 , 아무리 사소한 것이라도 그것이 거듭되면

무시하지 못할 정도로 크게 됨을 비유적으로 이르는 말 ( 국립국어원 )

브라우저 마다 조금씩 다르고같은 브라우저도 버전마다 조금씩 다르지만

중요한 건

이런 요소들을 고려하는 습관

감사합니다Thank you

Technology

[PHPFest 2013] High performance Javascript