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

  • 박재성, 심상민, 양정권, 황준호 지음

  • TECH@NHN 시리즈 _ 005
  • ISBN: 9788998139001
  • 18,000원 | 2012년 09월 18일 발행 | 396쪽



<NHN은 이렇게 한다! 자바스크립트 성능 이야기>는 NHN의 축적된 기술 정보와 사례를 공유하는 NHN 기술 서적 시리즈인 TECH@NHN의 다섯 번째 시리즈다. 이 책은 동적인 웹 사이트를 만들기 위해 주로 사용하는 언어인 자바스크립트를 중심으로 성능과 관련된 기본적인 주제를 다루면서 동시에 그 방법들이 필요한 이유를 설명한다. 그리고 제시된 방법들을 실제 예제로 확인할 수 있도록 구성했다.

책의 내용을 처음부터 순서대로 읽을 필요 없이 필요한 장의 내용만을 따로 읽어도 문제가 없도록 구성했다. 조금은 어려울 수 있는 내용도 있어 초급 개발자보다는 중급 개발자 이상에게 적합할 수 있다. 하지만 일부 내용은 초급 개발자가 읽기에 무리 없을 정도의 수준으로 설명했다.

NHN에서 오랫동안 고민해 왔던 자바스크립트를 활용한 프론트엔드 성능 향상 방법과 노하우가 이 책을 통해 전달되어, 웹을 이용하는 모든 사용자에게 더욱더 빠른 경험을 줄 수 있는 수많은 결과물의 시작점이 될 수 있기를 바란다.

웹 사이트의 성능을 높이는 방법은 이전에도 많이 다뤄 온 주제다. 그러나 단순히 방법만 논하는 것에서 더 나가 그 방법이 등장하게 된 배경과 기술적인 근본 이유를 이해한다면 각 상황에 맞춰 성능 최적화를 이룰 수 있을 것이다.

이 책은 동적인 웹 사이트를 만들기 위해 주로 사용하는 언어인 자바스크립트를 중심으로 성능과 관련된 기본적인 주제를 다루면서, 동시에 그 방법들이 필요한 이유를 설명하고 제시된 방법을 활용한 예제까지 보여 준다.

이 책에서 소개하는 최적화 방법은 몇 년간 NHN의 다양한 서비스에 적용해 효과를 본 방법부터 최근 화제가 되고 있는 HTML5의 여러 요소를 활용한 방법까지 다양하다. 모쪼록 이 책이 웹 사이트의 성능으로 고민하는 개발자에게 도움이 되기를 바란다.

박재성

건국대학교 컴퓨터 공학과를 졸업하고, 현재 NHN 플랫폼Ajax팀에서 기술 지원/분석과 신규 플랫폼 개발을 담당하고 있다. 신기술과 그에 대한 외부 공유에 관심이 많아 다양한 방법을 고민 중이며, 재미있게 일하는 개발자가 되기 위해 노력하고 있다. 저서로는 ‘자바스크립트 UI 개발과 Jindo 프레임워크’(위키북스, 2011)가 있다.

심상민

2001년부터 PHP 저작 도구인 미니보드를 만들어 배포했으며, SK C&C를 거쳐 현재는 NHN에서 개발자로 일하고 있다. 사내 자바스크립트 강의를 진행하고 있으며 교육이나 발표, 저술 활동에 관심이 많고 다양한 분야의 기술을 접하는 것을 좋아한다. NHN에서 오픈소스로 진행하고 있는 자바스크립트 애니메이션/게임 라이브러리인 콜리(Collie)와 jsMatch를 만들었다.

양정권

SK커뮤니케이션즈에서 검색 개발 업무를 담당했고, UI 개발에 흥미를 느껴 NHN의 UIT센터로 이직했다. NHN에서는 메일 3.0, 캘린더, N드라이브, 네이버me 등 다양한 프로젝트의 DL(Developer Leader) 역할을 수행했다. 현재는 UIT센터 내 검색Ajax팀을 맡아 네이버 검색 서비스의 UI 개발을 담당하고 있다.

황준호

숭실대학교 미디어학부를 졸업했으며, NHN에서 책 서비스 개발, OCR(문자인식)기술 개발, 카페 서비스 구조 개선, 플래시 개발 업무를 담당했다. 현재는 검색 서비스의 AJAX 개발을 담당하고 있다. 웹과 IT 관련 기술의 발전 동향과 웹 환경에서의 애니메이션 구현에 관심이 많다.

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