Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JavaScript 성능 최적화 요약

"JavaScript 성능 최적화 ()" 책 내용 요약 # Octobersky.js 모임 시작 발표 자료
by

항희 이

on 11 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JavaScript 성능 최적화 요약

JavaScript 성능 최적화 요약 이항희. 33살.
JavaScript에 관심이 많은 개발자입니다.

최근에는 Hadoop 기반의 보안 로그 분석 프로젝트를 하고 있는 중입니다 1장 로딩과 실행 Introduce... 2장 데이터 접근 3장 DOM 스크립팅 4장 알고리즘과 흐름 제어 5장 문자열과 정규 표현식 6장 응답성 좋은 인터페이스 7장 Ajax 8장 프로그래밍 사례 9장 고성능 자바스크립트 애플리케이션 빌드와 배포 10장 도구 스크립트의 위치 스크립트 묶기 비차단 스크립트 데이터의 전송 데이터 포맷 자바스크립트 파일을 결합하여 HTTP 요청 감소 Compressor 사용으로 스크립트 파일 용량 감소 스크립트를 압축(gzip)하여 제공 루프 조건문 재귀 태생부터 느립니다 DOM 접근과 수정 리페인트와 리플로우 스코프 관리 객체 멤버 네트워크 분석기를 써서 자원 로딩 병목 회피 스크립트를 필요한 때 다운로드 하게 함 프로파일러로 스크립트 병목 지점을 최적화 이중 평가 자제 객체/배열 리터럴 사용 작업을 반복하지 않기 브라우저의 UI 스레드 타이머 다루기 문자열의 병합 정규 표현식 최적화 브라우저의 스크립트 해석의 차단적 특성
제일 좋은 위치는 body 닫는 태그 바로 위 잦은 http 요청 === 느린 반응
서버에서 많은 수의 스크립트를 한 파일로 묶기
스크립트가 다운로드되고, 실행이 끝날 때까지는 모든 브라우저의 프로세스를 차단
defer, async 속성
동적 script 태그
XMLHttprequest 스크립트 로딩
LazyLoading Library 사용 식별자 해석의 깊이가 깊을수록 성능이 저하
자바스크립트의 스코프를 깊이 이해하기
스코프 체인 확장에 유의
클로저, with, try-catch 는 스코프 탐색 시간을 증가시킨다
프로토타입 체인이 반복될수록 성능 저하
' . ' 연산자의 연속으로 이어지는 중첩 멤버 줄이기 자주 사용하는 변수나 멤버는 현재 바로 접근할 수 있는 스코프에 캐시 DOM은 JS Core와 별도의 언어 독립적 API
접근할 때마다 비싼 사용료를 내야 한다. 루프안에서 DOM API를 조작하는건 나쁘며, 더 좋지 않은것은 그 API로 HTML 컬렉션을 조작하는 것.
최대한 DOM API 조작을 미루고 필요할 때 한번 DOM에 접근하는 것이 Best
DOM 메서드 < innerHTML DOM 트리와 Render 트리의 이해
리플로우 - 요소의 기하학적 위치를 새로 계산
리페인트 - 리플로우 등으로 영향을 받은 부위를 새로 그림
리플로우와 리페인트가 잦을수록 느려짐
렌더트리의 변경은 모았다가 한번에 처리하는게 유리
(변경할 요소를 숨기고 변경한 뒤 다시 표시하기 등)
이벤트 삽입은 가능한 위임 방식으로 지정 프로그래밍 언어는 상당 시간을 루프에서 소비
for -in 루프는 다른 루프에 비해 명확하게 느리다
루프 횟수를 미리 캐시하기
반복 횟수를 n으로 나누어 루프 하나에서 여러개를 처리하기 (Duff's Device 방법)
if - else는 조건이 적을때, switch - case 는 조건이 많을 때
조건값을 따로 참조 테이블화하기
if(val === 0) { return 'man' }
else if(val === 1) { return 'woman' }
else if(val === 2) { return 'monster' }
else if {val === 3} { return 'programer' }
else { return '???' } var map = [ 'man', 'woman', 'monster', 'programer', '???'];
return map[val]; 재귀는 꼭 필요항 상황에서만.
메모이제이션 기법으로 같은 계산 반복 회피 현실적으로 자바스크립트 프로그래밍은 문자열과의 싸움
IE6,7을 지원해야 한다면 join을 사용. 그렇지 않다면 + 사용 역추적에 주의. 보통 정규표현식이 느린 이유는 과도한 역추적의 폭주때문
룩어라운드를 사용한 최소그룹 지정
많은 역추적 포인트 만들지 않기
가급적 정확한 수량자 사용
정규표현식은 변수에 할당하여 재활용
정규표현식보다 기본 문자열 메서드로 사용 자바스크립트가 1초 이상 실행된다면, 그 코드는 잘못된 것이다. - 브랜든 에이히
작업은 모두 작업 큐에 추가된 뒤 하나씩 실행
스크립트를 실행 중에는 사용자의 조작을 받아들이지 않거나 건너뛰기에 사용자는 인터페이스와 단절을 느낄 수 있다.
setTimeout, setInterval 등의 함수의 인자에 주어지는 밀리초는 실행 시점이 아닌 작업큐에 추가하는 시점
타이머를 통한 거대한 배열 반복문의 처리
타이머는 절대 다수를 동시에 생성하여 사용하지 않기 var todo = ary.concat();
setTimeout(function() {
process(todo.shift());

if(todo.length > 0) {
setTimeout(arguments.callee, 25);
}
else {
proecEnd(ary);
}
}, 25) Ajax 요청 상태 중 readyState 값이 3일 경우의 스트리밍 활용으로 사용자 응답성 높이기
간단한 데이터 전송시 이미지 비콘(beacon) 사용 XML 사용시에는 가급적 자식 노드의 나열보다, 속성값으로 지정하는게 텍스트의 양도 줄고 파싱도 간단하다.
JSON 포맷 사용 시 키 이름을 가급적 줄여 용량을 줄이거나 아예 없앤다.
커스텀 포맷을 사용할 수 있고 사용에 문제가 없다면 커스텀 포맷이 더 빠를 수 있다. Ajax 성능 가이드 HTTP Expires 헤더를 설정
한번 요청된 데이터를 캐시
자신이 사용하는 Ajax 라이브러리를 정확히 파악하고 쓰기
eval은 거의 모든 경우에서 나쁘다.
Function 생성자 함수는 사용할일이 없다
setTimeout, setInterval의 첫 인자로 함수 객체로 사용 new Object -> {}
new Array -> [] 게으른 로딩
미리 한번 읽어두고 반복하지 않기 function addHandler(ele, type, handler) {
if(ele.addEventListener) { ... }
else { ... }
} function addHandler() {
if(ele.addEventListener) {
addHandler = function(ele, type, handler) { ... }
}
else {
addHandler = function(ele, type, handler) { ... }
}
addHandler(ele, type, handler);
} var addHandler = document.body.addEventListener ?
function(ele, type, handler) { ... }
:
function(ele, type, handler) { ... } 빠른 부분을 사용 자바스크립트는 비트연산 엔진이 고성능
사용자 구현메서드보다, 내장 메서드 사용 Expires 헤더 사용으로 캐시 유도 CDN 으로 서비스하기
Full transcript