웹 사이트 성능과 최적화
브라우저 동작 방식에 기반한 최적화
- 서비스 이동 단계
- 리다이렉트 단계
- 애플리케이션 캐시 확인 단계
- 네트워크 통신 단계
- 브라우저 처리 단계
요약
▣ 2장_기본적인 웹 사이트 최적화 방법
HTTP 요청 최소화
- CSS 스프라이트 기법 활용
- 헤더에 만료 날짜 추가
- 자바스크립트 파일 통합
파일 크기 최소화
- Gzip 압축을 이용한 파일 크기 최소화
- 쿠키 크기 최소화
렌더링 성능 향상
- 스타일시트와 자바스크립트 배치를 이용한 성능 향상
- 초기 렌더링 시 AJAX 요청 최소화
- 마크업 최적화
요약
▣ 3장_성능을 높이는 코드 스타일
객체의 생성, 초기화 성능
- 배열의 생성, 초기화 성능 비교
- 오브젝트(Object) 객체의 생성, 초기화 성능 비교
스코프 체인 탐색과 성능
- 스코프 체인이란?
- 지역변수를 활용한 스코프 체인 탐색 성능 개선
- 프로토타입 체인
- 그 외 스코프 체인 탐색 성능에 영향을 미치는 요소
반복문과 성능
- 반복문의 성능 비교
- for, while, do-while 구문의 최적화
- 효율적인 알고리즘 구현을 통한 성능 개선
조건문과 성능
- 조건문의 성능 비교
- 조건문 최적화
- 코드별 장단점 비교
문자열 연산과 성능
- 문자열 생성 성능 비교
- 문자열 연산 성능 비교
정규 표현식과 성능
- 탐색 대상 축소를 통한 성능 향상
- 컴파일 횟수 축소를 통한 성능 향상
요약
▣ 4장_렌더링
렌더링 과정
- 렌더링이 진행되는 과정
- 리플로와 리페인트
- 렌더링 과정 확인하기
리플로 최소화 방법
- 작업 그루핑
- 실행 사이클
- 노출 제어를 통한 리플로 최소화 방법
- 캐싱
- CSS 규칙
하드웨어 가속 렌더링
- 브라우저에서의 활용
- 웹킷의 GPU 렌더링
- 인터넷 익스플로러의 GPU 렌더링
요약
▣ 5장_UI 스레드와 타이머의 활용
UI 스레드의 정의와 특징
타이머의 정의와 특징
- setTimeout() 함수와 setInterval() 함수의 차이
- 타이머는 얼마나 정확한가?
타이머를 활용한 작업 스케줄링
- 페이지 로딩 시 발생할 수 있는 문제
- 점진적 처리를 위한 작업 스케줄링
- 점진적 렌더링(Progressive Rendering)
- 대기 시간 줄이기
고려할 수 있는 새로운 방법들
- 효율적 스크립트 실행 - setImmediate() 함수
- 단일 스레드 극복 - 웹워커(Web Worker)
- 효율적인 스크립트 애니메이션 실행 - requestAnimationFrame()
- 함수
요약
▣ 6장_DOM 스크립팅
자바스크립트 코어와 DOM 스크립팅
- 자바스크립트 코어의 성능 발전
- 자바스크립트 벤치마크와 DOM 스크립팅
DOM 접근 최소화
- DOM 캐싱
- HTML 컬렉션 캐싱
- 자바스크립트 객체 캐싱
CSS 속성 변경
- CSS 클래스나 규칙 사용
- CSS 규칙 사용
- 인터넷 익스플로러에서 성능 저하를 가져오는
- :hover 선택자
- CSS 선택자 사용
이벤트
- 이벤트 위임
- 빠르게 반복되는 이벤트의 단순화
요약
▣ 7장_AJAX와 다이내믹 로딩
효율적인 AJAX 통신
- 변하지 않는 데이터
- 일정한 주기로 변하는 데이터
- 로컬 저장소를 이용한 캐싱
다이내믹 로딩과 최적화
- 이미지 로딩 속도 최적화
- 다이내믹 로딩을 활용한 최적화
- 지연 로딩
- 최적화와 브라우저 점유율
- 동적인 자바스크립트 실행
- 의존성 있는 자바스크립트의 다이내믹 로딩
최적화 사례 - 상세 검색
요약
▣ 8장_성능을 높이는 신기술
폴리필
내비게이션 타이밍 API
웹 저장소
- 웹 저장소의 활용
- IndexedDB와 웹 SQL 데이터베이스와의 비교
애플리케이션 캐시
웹소켓
- 양방향 통신과 코멧
- 지속적으로 서버와 연결할 수 있는 웹소켓
- 웹소켓 사용 방법
- 웹소켓 서버
CSS3 3D Transforms
Prefetch와 Pre-Rendering
요약
▣ 9장_네이버 메일 3.0 성능 개선 사례
메일 3.0 서비스 개발과 성능 문제
네트워크 요청 줄이기
- 헤더에 만료 날짜 설정
- 버퍼 비우기
- AJAX 요청 횟수 줄이기
- CSS 스프라이트 사용
- 외부에 스타일시트 파일과 자바스크립트 파일 작성
- '404 Not Found' 발생 원인 제거
파일 크기 줄이기
- Gzip 컴포넌트 사용
- CSS 파일과 자바스크립트 파일 통합
- 사용하지 않는 CSS 규칙 제거
- 쿠키 크기 줄이기
- 페이지 크기를 증가시키는 디자인 수정
초기 페이지 로딩 속도 높이기
- 렌더링 방식 변경
- AJAX 캐시 사용
- IFrame 사용 줄이기
- CSS Expression( ) 표현식 사용하지 않기
요약
출처 : 알라딘
내용이 없습니다.
웹 사이트의 성능을 높이는 방법은 이전에도 많이 다뤄 온 주제다. 그러나 단순히 방법만 논하는 것에서 더 나가 그 방법이 등장하게 된 배경과 기술적인 근본 이유를 이해한다면 각 상황에 맞춰 성능 최적화를 이룰 수 있을 것이다.
이 책은 동적인 웹 사이트를 만들기 위해 주로 사용하는 언어인 자바스크립트를 중심으로 성능과 관련된 기본적인 주제를 다루면서, 동시에 그 방법들이 필요한 이유를 설명하고 제시된 방법을 활용한 예제까지 보여 준다.
이 책에서 소개하는 최적화 방법은 몇 년간 NHN의 다양한 서비스에 적용해 효과를 본 방법부터 최근 화제가 되고 있는 HTML5의 여러 요소를 활용한 방법까지 다양하다. 모쪼록 이 책이 웹 사이트의 성능으로 고민하는 개발자에게 도움이 되기를 바란다.
