1 웹 사이트 최적화 웹 사이트 성능과 최적화 ... 22 브라우저 동작 방식을 기반으로 한 최적화 ... 23 서비스 이동 단계 ... 24 리다이렉트 단계 ... 25 애플리케이션 캐시 확인 단계 ... 29 네트워크 통신 단계 ... 32 브라우저 처리 단계 ... 37 요약 ... 39 2 기본적인 웹 사이트 최적화 방법 HTTP 요청 최소화 ... 42 CSS 스프라이트 기법 활용 ... 43 헤더에 만료 날짜 추가 ... 46 자바스크립트 파일 통합 ... 49 파일 크기 최소화 ... 50 Gzip 압축을 이용한 파일 크기 최소화 ... 50 쿠키 크기 최소화 ... 52 렌더링 성능 향상 ... 53 스타일시트와 자바스크립트 배치를 이용한 성능 향상 ... 54 초기 렌더링 시 AJAX 요청 최소화 ... 54 마크업 최적화 ... 55 요약 ... 58 3 성능을 높이는 코드 스타일 객체의 생성, 초기화 성능 ... 60 배열의 생성, 초기화 성능 비교 ... 60 오브젝트(Object) 객체의 생성, 초기화 성능 비교 ... 62 스코프 체인 탐색과 성능 ... 64 스코프 체인이란? ... 65 지역변수를 활용한 스코프 체인 탐색 성능 개선 ... 69 프로토타입 체인 ... 71 그 외 스코프 체인 탐색 성능에 영향을 미치는 요소 ... 72 반복문과 성능 ... 73 반복문의 성능 비교 ... 73 for, while, do-while 구문의 최적화 ... 76 효율적인 알고리즘 구현을 통한 성능 개선 ... 81 조건문과 성능 ... 82 조건문의 성능 비교 ... 82 조건문 최적화 ... 82 코드별 장단점 비교 ... 91 문자열 연산과 성능 ... 92 문자열 생성 성능 비교 ... 92 문자열 연산 성능 비교 ... 93 정규 표현식과 성능 ... 95 탐색 대상 축소를 통한 성능 향상 ... 95 컴파일 횟수 축소를 통한 성능 향상 ... 96 요약 ... 97 4 렌더링 렌더링 과정 ... 102 렌더링이 진행되는 과정 ... 102 리플로와 리페인트 ... 106 렌더링 과정 확인하기 ... 108 리플로 최소화 방법 ... 112 작업 그루핑 ... 112 실행 사이클 ... 113 노출 제어를 통한 리플로 최소화 방법 ... 115 캐싱 ... 118 CSS 규칙 ... 119 하드웨어 가속 렌더링 ... 119 브라우저에서의 활용 ... 120 웹킷의 GPU 렌더링 ... 124 인터넷 익스플로러의 GPU 렌더링 ... 125 요약 ... 126 5 UI 스레드와 타이머의 활용 UI 스레드의 정의와 특징 ... 128 타이머의 정의와 특징 ... 130 setTimeout() 함수와 setInterval() 함수의 차이 ... 131 타이머는 얼마나 정확한가? ... 135 타이머를 활용한 작업 스케줄링 ... 137 페이지 로딩 시 발생할 수 있는 문제 ... 137 점진적 처리를 위한 작업 스케줄링 ... 139 점진적 렌더링(Progressive Rendering) ... 141 대기 시간 줄이기 ... 142 고려할 수 있는 새로운 방법들 ... 144 효율적 스크립트 실행 - setImmediate() 함수 ... 144 단일 스레드 극복 - 웹워커(Web Worker) ... 145 효율적인 스크립트 애니메이션 실행 - requestAnimationFrame() 함수 ... 150 요약 ... 151 6 DOM 스크립팅 자바스크립트 코어와 DOM 스크립팅 ... 154 자바스크립트 코어의 성능 발전 ... 155 자바스크립트 벤치마크와 DOM 스크립팅 ... 156 DOM 접근 최소화 ... 160 DOM 캐싱 ... 160 HTML 컬렉션 캐싱 ... 162 자바스크립트 객체 캐싱 ... 166 CSS 속성 변경 ... 170 CSS 클래스나 규칙 사용 ... 170 CSS 규칙 사용 ... 174 인터넷 익스플로러에서 성능 저하를 가져오는 :hover 선택자 ... 176 CSS 선택자 사용 ... 177 이벤트 ... 180 이벤트 위임 ... 181 빠르게 반복되는 이벤트의 단순화 ... 185 요약 ... 187 7 AJAX와 다이내믹 로딩 효율적인 AJAX 통신 ... 190 변하지 않는 데이터 ... 190 일정한 주기로 변하는 데이터 ... 193 로컬 저장소를 이용한 캐싱 ... 195 다이내믹 로딩과 최적화 ... 198 이미지 로딩 속도 최적화 ... 198 다이내믹 로딩을 활용한 최적화 ... 200 지연 로딩 ... 201 최적화와 브라우저 점유율 ... 204 동적인 자바스크립트 실행 ... 206 의존성 있는 자바스크립트의 다이내믹 로딩 ... 214 최적화 사례 - 상세 검색 ... 230 요약 ... 233 8 성능을 높이는 신기술 폴리필 ... 236 내비게이션 타이밍 API ... 238 웹 저장소 ... 243 웹 저장소의 활용 ... 244 IndexedDB와 웹 SQL 데이터베이스와의 비교 ... 248 애플리케이션 캐시 ... 251 웹소켓 ... 255 양방향 통신과 코멧 ... 255 지속적으로 서버와 연결할 수 있는 웹소켓 ... 258 웹소켓 사용 방법 ... 261 웹소켓 서버 ... 262 CSS3 3D Transforms ... 264 Prefetch와 Pre-Rendering ... 267 요약 ... 268 9 네이버 메일 3.0 성능 개선 사례 메일 3.0 서비스 개발과 성능 문제 ... 272 네트워크 요청 줄이기 ... 274 헤더에 만료 날짜 설정 ... 275 버퍼 비우기 ... 275 AJAX 요청 횟수 줄이기 ... 278 CSS 스프라이트 사용 ... 278 외부에 스타일시트 파일과 자바스크립트 파일 작성 ... 279 '404 Not Found' 발생 원인 제거 ... 279 파일 크기 줄이기 ... 280 Gzip 컴포넌트 사용 ... 280 CSS 파일과 자바스크립트 파일 통합 ... 280 사용하지 않는 CSS 규칙 제거 ... 281 쿠키 크기 줄이기 ... 282 페이지 크기를 증가시키는 디자인 수정 ... 283 초기 페이지 로딩 속도 높이기 ... 284 렌더링 방식 변경 ... 285 AJAX 캐시 사용 ... 286 IFrame 사용 줄이기 ... 288 CSS Expression() 표현식 사용하지 않기 ... 289 요약 ... 291