NHN은 이렇게 한다! 자바스크립트 성능 이야기

▣ 1장_웹 사이트 최적화

웹 사이트 성능과 최적화
브라우저 동작 방식에 기반한 최적화
- 서비스 이동 단계
- 리다이렉트 단계
- 애플리케이션 캐시 확인 단계
- 네트워크 통신 단계
- 브라우저 처리 단계
요약

▣ 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( ) 표현식 사용하지 않기
요약