Recomendados
Mais conteúdo relacionado
Semelhante a [PHPFest 2013] High performance Javascript
Semelhante a [PHPFest 2013] High performance Javascript (20)
Último
Último (6)
[PHPFest 2013] High performance Javascript
- 2. = 어떻게 하면 조금 더 빠를까? HighPerformance JavaScript 성능을 생각하는 자바스크립트
- 3. 우리는 어떤 것을 ‘성능이 좋다’고 하는가?
- 4. 빠르다 가볍다 느리다 무겁다 기준이 뭔가요?
- 5. 처리속도, 메모리 소비와 반환 화면의 깜빡임 사용자 행동에 대한 반응속도 다 종합해서 ‘성능’
- 6. 변수할당은 반복문 바깥에서 var a = [1,2,3,4]; var a = [1,2,3,4]; var test; var len = a.length; for(i=0; i<a.length; i++){ var test = 1; } for(i=0; i<len; i++){ test = i+1; }
- 7. 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
- 8. Scope는 가능한 적게 with(document){ var el = createElement("div"); } 꼭 필요한 경우가 아니면 with 구문 사용은 자제
- 9. Scope는 가능한 적게 var elDiv = htElement.htDivs.elDiv; elDiv.innerHTML = ‚Hello World‛; 변수 Scope가 길어지면 로컬 변수로 캐시해서 사용 이 방법은 코드 압축시의 효과도 높여줍니다
- 10. 정규식 선언은 한 번만 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, ‘’); }
- 11. Selector 탐색 비용 최소화 getElementById getElementsByTagName getElementsByClassName http://jindo.dev.naver.com/jsMatch/?d=86&openResult=1
- 12. Selector 탐색 비용 최소화 탐색 범위는 좁고 정확할 수록 좋 다 당연히 더 많은 범위를 찾을 때 더 오래 걸린 다 // jQuery $(“.test”); $(“#container”).find(“.test”); // JindoJS $$(“.test”); $Element(“container”).queryAll(“.test”);
- 13. 이벤트 핸들러는 영역 단위로 이벤트 핸들러는 메모리를 소모한다 버블링(Bubbling)을 활용하자
- 14. 이벤트 핸들러는 영역 단위로 <ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li> </ul> $(“.a”).click(function(){ … }); $(“.b”).click(function(){ … });
- 15. 이벤트 핸들러는 영역 단위로 <ul id=“list”> <li class=“a”>a</li> <li class=“b”>b</li> </ul> $(“#list”).click(function(weEvt){ if($(weEvt.target).hasClass(“a”)){ … } });
- 16. 이벤트 발생 순서 domready > load touchstart > click mousedown > click 더 먼저 발생하는 이벤트를 활용할 수 있다면 그 이벤트를 활용하라
- 17. GC GC(Garbage Collector)에 의해 제거되도록 하기 위해서는 사용하지 않는 것에 대해서는 참조를 유지하지 말아야 한다. 사용하지 않는 참조를 null로!
- 19. 쿠키? 로컬스토리지? HTTP 헤더도 다이어트가 필요합니 다 document.cookie window.localStorage
- 21. 네트워크 이야기 나온 김에… 네트워크 접속 횟수는 가능한 적 게! HTTP Connection 할 때마다 기본적으로 소요되는 수백ms 무시 못 합니다 (특히 모바일)
- 22. 문자열 합치기에는 배열 활용 var a = ‚‛; var a = []; for(i=0; i<10; i++){ a += ‚a‛; } for(i=0; i<10; i++){ a.push(‚a‛) } a.join(‚‛); Array(11).join(‚a‛); 무조건은 아니고, HTML 같이 긴 문자열 연산시!
- 23. less DOM Manipulation DOM 조작 때 마다 브라우저는 화면을 새로 그리려고 한다 깜빡임과 성능 저하의 주범
- 24. less DOM Manipulation Repaint: Element Visibility 변화시, 레이아웃 자체를 변화하지는 않는 경우 (outline, visibility, 배경색) DOM Tree 내에 존재하는 모든 노드의 Visibility 를 다 새로 검사하므로 상당히 비싼 작업 Reflow: 전체 페이지 자체의 레이아웃이 변화하는 경우 (appendChild, removeChild … )
- 25. less DOM Manipulation <ul id=“list”></ul> for(i=0;i<100;i++){ $(“#list”).append($(“<li>”).text(i)); } http://jindo.dev.naver.com/jsMatch/?d=87&openResult=1
- 26. less DOM Manipulation <ul id=“list”></ul> var a = []; for(i=0;i<100;i++){ a.push(“<li>” + i + “</li>”); } $(“#list”).html(a.join(“”)); http://jindo.dev.naver.com/jsMatch/?d=87&openResult=1
- 27. less DOM Manipulation 그러므로 … 여러분은 appendChild 보다 innerHTML 을 가까이 하는 것이 낫습니다
- 28. 성능 측정, 비교 도구
- 32. Chrome 개발자도구
- 33. 결론
- 34. 가랑비에 옷 젖는 줄 모른다 가늘게 내리는 비는 조금씩 젖어 들기 때문에 여간해서도 옷이 젖는 줄을 깨닫 지 못한다는 뜻으로, 아무리 사소한 것이라도 그것이 거듭되면 무시하지 못할 정도로크게 됨을 비유적으로이르는말 (국립국어원)
- 36. 브라우저 마다 조금씩 다르고 같은 브라우저도 버전마다 조금씩 다르지만 중요한 건 이런 요소들을 고려하는 습관
- 37. 감사합니다 Thank you