[자바스크립트] 자바스크립트 성능이야기

발 행: 2012년 9월 17일

지은이: 박재성, 심상민, 양정권, 황준호

머릿말 일부 발췌:

만약 사용자에게 인내심을 요구하고 있다고 생각한다면 지금보다 웹사이트의 성능을 높일 수 있는 방법이 없을지 고민해야 한다. 성능을 높인다는 것은 단순히 체감 속도를 높여 만족감을 높이는 것만은 아니다. 웹 사이트의 성능을 높이면 한정된 시간에 사용자에게 더 많은 것을 보여 줄 수 있고 사용자로부터 행동을 이끌어 낼 가능성을 높일 수 있다. 또한 느린 사이트로 사용자가 옮겨 가는 것을 줄여 사용자를 모을 수도 있다. 그리고 네트워크와 같은 한정된 자원을 절약할 수도 있다. 이것은 동시에 더 많은 사용자가 사이트를 이용할 수 있다는 것을 의미하며, 더 적은 비용으로 서비스를 운영할 수 있다는 것을 의미한다.

책을 읽은 독자가 여기서 멈추지 않고 성능에 대해 더 고민하고 공부했으면 한다. 성능은 아무리 공부해도 아깝지 않은 분야이기 때문이다. 그리고 이를 계기로 자바스크립트에 대해 깊게 고민하는 개발자가 많아졌으면 한다.

1장 웹사이트 최적화에서는 프론트엔드 최적화에 대한 기본 지식과 브라우저가 웹 페이지를 보여 주기 위해 어떤 단계를 거치는지 설명한다.

웹사이트 성능과 최적화

브라우저 동작방식을 기반으로한 최적화

 - 서비스 이동단계

 - 리다이렉트 단계

 - 애플리케이션 캐시 확인 단계

 - 네트워크 통신 단계

 - 브라우저 처리 단계

2장 기본적인 웹 사이트 최적화 방법에서는 성능을 높이기 위해 가장 널리 사용하는 방법들을 다룬다. HTTP 요청을 최소화하는 방법, 전송되는 파일의 크기를 줄여 네트워크 트래픽을 감소시켜 필요한 리소스를 더 빠르게 로딩하는 방법, 그리고 간단하지만 많은 개발자들이 간과할 수 있는 파일의 로딩 순서(배치)를 변경하는 방법 등을 다룬다.

HTTP 요청 최소화

 - CSS 스프라이트 기법 활용

 - 헤더에 만료 날짜 추가

 - 자바스크립트 파일 통합

파일 크기 최소화

 - Gzip 압축을 이용한 파일 크기 최소화

 - 쿠키 크기 최소화

렌더링 성능 향상

 - 스타일시트와 자바스크립트 배치를 이용한 성능 향상

 - 초기 렌더링 시 AJAX 요청 최소화

 - 마크업 최적화

3장 성능을 높이는 코드 스타일은 특별하고 새로운 방법을 다루지는 않지만, 코드 작성에서 쉽게 간과하는 성능 관련 내용을 다루고 있다. 일상적인 코드 작성 스타일을 바꾸는 것만으로도 성능을 크게 향상시킬 수 있음을 예제를 통해 직접 확인해 본다.

객체의 생성, 초기화 성능

 - 배열의 생성, 초기화 성능 비교

 - 오브젝트(Object) 객체의 성능, 초기화 성능 비교

스코프 체인 탐색과 성능

 - 스코프 체인이란?

 - 지역변수를 활용한 스코프 체인 탐색 성능 개선

 - 프로토타입 체인

 - 그 외 스코프 체인 탐색 성능에 영향을 미치는 요소

반복문과 성능

 - 반복문의 성능 비교

 - for, while, do-while 구문의 최적화

 - 효율적인 알고리즘 구현을 통한 성능 개선

조건문과 성능

 - 조건문의 성능 비교

 - 조건문의 최적화

 - 코드별 장단점 비교

문자열 연산과 성능

 - 문자열 생성 성능 비교

 - 문자열 연상 성능 비교

정규 표현식과 성능

 - 탐색 대상 축소를 통한 성능 향상

 - 컴파일 횟수 축소를 통한 성능 향상

4장 렌더링은 브라우저가 HTML 코드를 분석해 화면으로 출력하는 과정을 설명한다. 이 과정에서 발생할 수 있는 성능 비용과 이를 최소화하기 위한 방법을 다루며, 최근 브라우저에서 경쟁적으로 도입하고 있는 하드웨어 가속 렌더링에 대한 내용도 다룬다.

렌더링 과정

 - 렌더링이 진행되는 과정

 - 리플로와 리페인트

 - 렌더링 과정 확인하기

리플로 최소화 방법

 - 작업 그루핑

 - 실행 사이클

 - 노출 제어를 통한 리플로 최소화 방법

 - 캐싱

 - CSS 규칙

하드웨어 가속 렌더링

 - 브라우저에서의 활용

 - 웹킷의 GPU 렌더링

 - 인터넷 익스프로러의 GPU 렌더링

5장 UI 스레드와 타이머의 활용에서는 UI 스레드에 대한 이해와 함께 타이머의 동작 방식에 대해 자세히 살펴본다. 타이머를 활용해 작업을 스케줄링하는 방법과 이를 활용한 성능 향상 방법을 소개한다. 그 외 관련 신기술도 함께 소개한다.

UI 스레드의 정의와 특징

타이머의 정의와 특징

 - setTimeout() 함수와 setInterval() 함수의 차이

 - 타이머는 얼마나 정확한가?

타이머를 활용한 작업 스케줄링

 - 페이지 로딩 시 발생할 수 있는 문제

 - 점진적 처리를 위한 작업 스케줄링

 - 점진적 렌더링(Progressive Rendering)

 - 대기 시간 줄이기

고려할 수 있는 새로운 방법들

 - 효율적 스크립트 실행 : setImmediate() 함수

 - 단일 스레드 극복 : 웹워커(Web Worker)

 - 효율적인 스크립트 애니메이션 실행 : requestAnimationFrame() 함수

6장 DOM 스크립팅은 자바스크립트 코드의 대다수를 차지하는 DOM 핸들링과 관련된 내용을 다룬다. 간단하지만 성능에 큰 차이를 가져올 수 있는 방법들을 소개하며, CSS 규칙의 활용과 피해야할 코드 패턴을 소개한다.

자바스크립트 코어와 DOM 스크립팅

 - 자바스크립트 코어의 성능 발전

 - 자바스크립트 벤치마크와 DOM 스크립팅

DOM  접근 최소화

 - DOM 캐싱

 - HTML 컬렉션 캐싱

 - 자바스크립트 객체 캐싱

CSS 속성 변경

 - CSS 클래스나 규칙 사용

 - CSS 규칙 사용

 - 인터넷 익스플로러에서 성능 저하를 가져오는 :hover 선택자

 - CSS 선택자 사용

이벤트

 - 이벤트 위임

 - 빠르게 반복되는 이벤트의 단순화

7장 AJAX와 다이나믹 로딩에서는 AJAX 응답 캐싱을 사용해 더 빠르게 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() 표현식 사용하지 않기

백엔드 개발 인프라인 서버자원이 비용이 들어가는 반면 프론트 개발 인프라는 사용자 브라우저가 그 인프라가 되기 때문에 비용이 들어가지 않아, 성능에 대해 상대적으로 신경을 많이 쓰지 않는 면이 있습니다. 자바 성능 관련 책대비 자바스크립트 성능 관련 책의 수도 적은 편인것 처럼 보입니다.  백엔드는 서버언어, RDBMS나 미들웨어 최적화만 해도 관련 자료가 수두룩 하니 말입니다. 어제 도서관에 들렀다가 자바스크립트 성능 책을 발견하고, 냅다 빌렸습니다. 웹개발을 하려면 프론트에 대한 깊은 지식도 필요하다고 생각하며, 본 서가 실무에 실질적 도움이 될 책이라 여겨집니다.