목차 일부
1 웹 사이트 최적화
웹 사이트 성능과 최적화 ... 22
브라우저 동작 방식을 기반으로 한 최적화 ... 23
서비스 이동 단계 ... 24
리다이렉트 단계 ... 25
애플리케이션 캐시 확인 단계 ... 29
네트워크 통신 단계 ... 32
브라우저 처리 단계 ... 37
요약 ......
더보기
목차 전체
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
더보기 닫기