자바스크립트 성능 이야기

 

1. 웹 사이트 최적화

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

• 서비스 이동 단계 (Prompt for unload)
  • 다른주소로 이동할때 제일먼저 실행
  • 페이지 떠날때 메모리 해제작업
  • beforeunload
• 리다이렉트 단계
  • 사용자 요청 url 에서 다른 url로 다시 보내는
  • 리다이렉트 발생시 상태코드 301 302 반환, http 요청을 완수하기위해 추가로 뭔가를 해야 한다는 의미
  • url 뒤에 슬래시(/) 넣어야 원치않는 리다이렉트 방지 가능
• 애플리케이션 캐시 확인 단계 (App Cache)
  • c:/documents and settings/{User}/local settings/temporary internet files
  • 유효성과 사용해도되는지 확인을 위해 몇가지 용어와 규칙 필요
    • Last-Modified
    • If-Modified-Since
    • Expires
    • Cache-Control
    • max-age
  • 캐시 동작 순서
    1. Expires 확인
    2. If-Modified-Since 확인
    3. If-Modified-Since 정보와 Last-Modified 비교 (같으면 304 Not Modified return)
• 네트워크 통신 단계 (DNS, TCP, Request, Response)
  • Cache 사용 네트워크 요청 X
  • 브라우저 호스트별 최대 동시 연결개수 정해져있다.
  • dns lookup 시간
  • tcp 연결 시간은 fe에서 줄일 수 없음
  • response 시간은 데이터 크기에 비례하기때문에, gzip 같은 압축 기술을 사용
• 브라우저 처리 단계
  • domLoading > dominteractive > DomContentLoaded > domComplete > onload
  • onload 는 모든 이미지 스타일시트 js 등이 모두 다운로드 될때 발생, DomContentLoaded 는 dom생성에만 관련

2. 기본적인 웹 사이트 최적화 방법

HTTP 요청 최소화

• CSS 스프라이트 기법 활용
• 헤더에 만료 날짜 추가 (캐시 재사용)
• 자바스크립트 파일 통합

파일 크기 최소화

• Gzip 압축을 이용한 파일 크기 최소화 (js, css)
• 쿠키 크기 최소화
  • 사용하지 않는 쿠키 삭제
  • 만료날짜 짧게
  • 쿠키 설정시 최상위 도메인 사용 안함
  • 쿠키 정보 필요없는 image css js 는 별도의 도메인으로 서비스 (쿠키정보 공유 X)

렌더링 성능 향상

• 기본적인 흐름
  1. HTML 파싱, DOM 트리 구성
  2. 렌더 트리 구성 (DOM + 스타일 규칙)
  3. 렌더 트리의 배치
  4. 렌더 트리 그리기
• 스타일 시트와 자바스크립트 배치를 이용한 성능 향상
  • 스타일시트는 HEAD 태그에
  • JS 파일은 </body> 바로 위에
• 초기 렌더링 시 ajax 요청 최소화
• 마크업 최적화
  • 태그 중첩 최소화
  • table 태그 미사용
  • 되도록 div 와 스타일시트를 이용해 레이아웃 구성
  • 이미지 너무 크지 않게

3. 성능을 높이는 코드 스타일

객체의 생성, 초기화 성능

• 배열의 생성, 초기화 성능 비교
  • 리터럴 생성
  • [] 할당이 push 보다 낫다
• 오브젝트 객체의 생성, 초기화 성능 비교
  • 리터럴 생성
  • .a ['a'] 큰 차이가 없다.

스코프 체인 탐색과 성능

• 탐색경로
  • 실행문맥 > 스코프체인 > 활성화객체1 > 스코프체인 > 활성화객체2 > 스코프체인 > 전역객체
• 지역변수를 활용한 스코프 체인 탐색 성능 개선
• 프로토타입 체인
  • 모든객체는 인스턴스는 new 연산자로 생성, 생성되면 생성자의 프로토타입을 참조
  • with 구문은 쓰지말것
    • with 구문 인자로 구성된 활성객체가 스코프 체인 탐색순위의 최우선권을 가짐
    • with 구문이 포함된 지역변수에 접근하는것 조차 탐색경로를 2번 거쳐야한다. 성능 저하
    • try-catch 의 catch 구문도 with 와 같은방식이므로 성능문제를 감안해야함.

반복문과 성능

• 반복문의 성능 비교
  • for
  • for-in
    • 반복시점마다 객체의 모든 속성 무작위 탐색, 성능이 좋지 않음.
  • while
  • do-while
• for, while, do-while 구문의 최적화
  • 반복 length 를 변수로 따로
• 효율적인 알고리즘 구현을 통한 성능 개선

조건문과 성능

• 조건문의 성능 비교 (일반적으로 조건이 많아질수록 switch 성능이 좀더 좋다.) // 큰 차이 없음
  • if-else
  • switch
  • 삼항연산자
• 조건문 최적화
  • 배열과 해시객체 비교
  • 복잡한 로직시엔 코드 유지보수와 관련해서 생각

문자열 연산과 성능

• 문자열 생성 성능 비교
  • String 객체
  • 리터럴 (우세)
• 문자열 연산 성능 비교
  • +=
  • .join() (우세)

정규 표현식과 성능

• 탐색 대상 축소를 통한 성능 향상
  • 분리된 정규표현식으로 사용이 우세
• 컴파일 횟수 축소를 통한 성능 향상
  • 정규식을 지역변수로 따로 저장

4. 렌더링

렌더링 과정

• 렌더링 과정
  1. dom요소와 스타일에 기반을 둔 레이아웃 계산
  2. 계산된 요소의 화면 표현
• 렌더링이 진행되는 과정
  1. dom 트리 생성
  2. 스타일 구조체 생성
     • 브라우저 기본스타일
     • 사용자 정의 스타일 (style 태그)
     • html 인라인 스타일
  3. 렌더 트리 생성
     • dom트리와 다르게 스타일 정보가 설정 // display:none 시 포함되지 않음
  4. 레이아웃 처리
     • 렌더 트리의 노드 크기 계산 후 정확한 위치에 배치되도록 위치 계산
     • CSS 비주얼 렌더링 모델에 의해 제어
  5. 페인트
     • 렌더트리를 순회하면서 페인트 함수를 호출해 화면에 표현
• 리플로와 리페인트
  • 리플로 (reflow, layout, layouting)
    • 노트의 크기 또는 위치가 바뀌어 현재 레이아웃에 영향을 미쳐 다시 해야할때 발생
  • 리페인트 (repaint, redraw)
    • 변경 영역의 결과를 표현하기 위해 화면이 업데이트 되는 것
    • 리플로 발생 또는 배경색 변경 같은 단순 스타일 변경 작업 발생시
• 렌더링 과정 확인하기
  • recalculate style: 요소의 스타일값을 재계산 하는 단계
  • layout: 리플로가 발생한 단계
  • paint: 변경 요소를 화면에 표현하는 단계

리플로 최소화 방법

• 작업 그루핑
• 실행 사이클 : 가능하면 한 실행사이클에서 실행
• 노출 제어를 통한 리플로 최소화 방법
  • display 속성 (display none-block)
  • 노드복제 후 replace
  • createDocumentFragment() 메서드 사용
    • dom api 사용해야할때, 복제해서 사용 후 append
• 캐싱
  • 리플로 유발 메서드 호출 횟수 줄이는 것
  • 리플로 유발 메서드
  What forces layout/reflow. The comprehensive list.
• css 규칙
  • 대상요소의 수가 많다면, stylesheet.insertRule 로 규칙처리 방식이 빠를 수 있다.

하드웨어 가속 렌더링

• cpu 에 의존하던 것을 gpu 로 렌더링 ?
• 브라우저에서의 활용
• 웹킷의 gpu 렌더링
  • video요소, css3 3d transformation/animation
• 인터넷 익스플로러의 GPU 렌더링

5. UI 스레드와 타이머의 활용

UI 스레드의 정의와 특징

• UI 스레드란 브라우저의 화면 업데이트 프로세스와 자바스크립트 프로세스가 공유하는 스레드

타이머의 정의와 특징

• setTimtout, setInterval 의 차이
  • setTimeout: 마지막 작업이 실행된 이후를 기점으로 지정된 시간 이후 실행
  • setInterval: 최대한 지정된 시간에 실행
• 타이머는 얼마나 정확한가?
  • 스케줄링을 위해 큐에 작업을 넣고 실행되는 시점에 프로세스 실행
  • 윈도우에선 기본적으로 WinAPI 의 WaitForMultipleObjects 함수를 사용
    • 실행주기의 기본값으로 15.6ms 를 갖는다.
      • timeBeginPeriod 함수로 기본값 바꿀수 있지만... 위험성있다.
    • 1ms 로 타이머를 설정해도 의미가 없다.
  • 웹킷 계열 브라우저는 자체적으로 10ms 보다 빠른 처리는 실행되지 않게 한다.

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

• 페이지 로딩 시 발생할 수 있는 문제
  • 비동기 작업을 실행할 수 있는 타이머로 로딩 속도 향상
• 점진적 처리를 위한 작업 스케줄링
• 점진적 렌더링 (progressive rendering)
• 대기 시간 줄이기
  • 실행시간 긴 코드를 주석 처리 후 필요시점에 주석 제거

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

• 효율적 스크립트 실행 - setImmediate 함수 (IE10 전용)
  • 타이머로 실행되는것이 아니라서 큐에 등록되는 작업들을 타이머로 관리할 필요가 없다.
  • 시스템 인터럽트를 기다리지 않고 단순히 UI 스레드가 유휴 상태가 되었을때를 기다려 등록된 작업을 실행
• 단일 스레드 극복 - 웹워커(Web Worker)
  • 완전히 별도의 문맥에서 백그라운드 스레드로 실행
  • window, DOm, document, parent 객체에 접근 불가
  • 메시징을 통해 입출력 통신
  • 메세지는 직렬화되어 항상 복제되어 전달
• 효율적인 스크립트 애니메이션 실행 - requestAnimationFrame
  • 60FPS 를 목표로 프레임을 구성하고 출력
    • 리플로와 리페인트의 발생을 최소화
  • 호출되던 함수를 requestAnimationFrame 함수의 파라미터로 전달
  • 이후 함수 내부에서 다시 requestAnimationFrame 함수로 재귀 호출

6. DOM 스크립팅

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

• 자바스크립트 코어의 성능 향상
  • js 는 인터프리터 언어, 실행될때마다 해석되고 형변환 자유로움
• 자바스크립트 벤치마크와 dom 스크립팅
  • dom 은 자바스크립트와 문서를 연결하는 인터페이스이므로 자바스크립트 코어를 사용할 때보다 많은 자원과 시간이 필요하다.

DOM 접근 최소화

• DOM 캐싱
• HTML 컬렉션 캐싱
  • HTML 컬렉션은 항상 업데이트 된다.
• 자바스크립트 객체 캐싱

CSS 속성 변경

• css 클래스나 규칙 사용
  • 미리 정의할 수 있는 css 클래스를 충분히 활용하는것이 좋다.
• css 규칙 사용
  • style 태그를 추가해 동적으로 스타일 규칙을 적용
• IE 성능저하를 가져오는 :hover 선택자
  • 많이 사용시 스크롤 느려지는 현상
  • 앵커 요소가 아닌 hover 선택자 사용시 느려지는 현상
• CSS 선택자 사용
  • 오른쪽에서 왼쪽으로 찾는다.
    • 마지막에 정의하는 선택자를 상세하게 기술하는것이 좋다.
  • 문서의 요소를 찾을 때 아이디를 사용
  • CSS 선택자를 최대한 간단하게 사용한다.

이벤트

• 이벤트 위임
  • 캡쳐 - 타깃 - 버블링
  • 버블링을 이용한 이벤트 위임
• 빠르게 반복되는 이벤트의 단순화

7. AJAX와 다이내믹 로딩

효율적인 AJAX 통신

• 기본적인 아이디어는 한번 받은 데이터를 캐싱해서 재사용
• 변하지 않는 데이터
• 일련의 주기로 변하는 데이터
• 로컬 저장소를 이용한 캐싱

다이내믹 로딩과 최적화

• 이미지 로딩 속도 최적화
  • css 스프라이트
  • 이미지 파일의 메타 정보 제거
  • display none 이미지 처리
• 다이내믹 로딩을 활용한 최적화
  • 지연로딩
  • 다운로드 시점을 조절해 웹 페이지의 렌더링 속도를 높이는 방법
  • HTML > STYLE > IMAGE > JS
    • JS 의 블로킹때문에 IMAGE 를 먼저 불러와라
• 최적화와 브라우저 점유율
• 동적인 자바스크립트 실행
  • defer, async 속성
  • xhr 기술을 활용한 자바스크립트 동적 다운로드
    • 코드를 텍스트로 받아와서 파싱하고 활성화작업 필요(eval)
    • script injection 으로 실행 가능
  • Script DOM injection 방식을 활용한 js 동적 다운로드
    • 실제로 자주 사용, jsonp 와 유사하게 동작
  • iframe 을 활용한 js 동적 다운로드
    • 미사용 권장
  • document.write() 메서드를 활용한 동적 다운로드
    • 미사용 권장 (웹페이지 전체 지워짐, 병렬 다운로드 미허용)
• 의존성 있는 js 의 다이내믹 로딩
  • 자바스크립트 실행 및 초기화 순서
  • XHR 과 script injection을 활용하는 방식에서의 js 실행순서 보장
  • Script Dom injection 방식에서의 js 실행 순서 보장
  • document.write() 메서드 활용시 js 실행 순서 보장
  • 인라인 js 와의 순서 보장

최적화 사례 - 상세검색

8. 성능을 높이는 신기술

폴리필

• 버전이 낮은 브라우저에서 지원하지 않는 기능을 제공하는 코드나 플러그인

네비게이션 타이밍 API

웹 저장소

• 웹 저장소
• indexedDB, 웹 sql 데이터베이스

애플리케이션 캐시

• 사용자가 manifest 속성을 명시한 파일을 캐싱하고 이 명세의 내용이 바뀌기 전까지는 네트워크 연결 없이 캐싱한 파일을 사용

웹소켓

• 웹페이지와 서버가 실시간으로 정보를 주고받을 수 있게 만든 방법
• 양방향 통신과 코멧
  • Ajax 폴링
    • 이벤트 발생 상관없이 주기적으로 반복
  • Ajax 롱 폴링
    • 이벤트가 발생시 브라우저 응답을 받음
    • 이벤트 발생시가지 응답을 지연시킴
  • 스트리밍
    • 멀티파트 방식으로 조각(chunk) 데이터를 받을 때마다 onreadystatechange 이벤트를 발생시키는 브라우저 특성을 이용해 연결을 끊지 않고 지속적으로 자료를 받음
• 지속적으로 서버와 연결할 수 있는 웹소켓
  • 서버와 브라우저 사이의 양방향 통신을 가능하게 하는 TCP 연결
  • 한번의 연결로 여러번의 메세지 처리

CSS3 3D transforms

• CSS 만으로 3d 효과를 낼 수 있는 기ㅏ술

Prefetch 와 Pre-Rendering

• Prefetch
  • 사전에 리소스를 불러오는 기술
  • 현재페이지에 머무는 동안 리소스를 백그라운드로 불러옴
• Prerendering
  • 현재페이지에 머무는 동안 백그라운드로 브라우저가 다음 페이지를 렌더링

9. 네이버 메일 3.0 성능 개선 사례