이전에도 시간을 이용하여 성능을 측정하는 방법은 있었지만 실제로 스크립트의 설정과 시간 관련 API 들의 제한으로 인해 자세하고 정확하게 측정하기는 어려웠습니다. 이를 해결하기 위해 W3C에서는 High Resolution Time Stamp라는 타입을 추가하였고 이제 모던 브라우저에서 이를 사용할 수 있는 User Timing API이 구현되어 있습니다.
이 튜토리얼은 사용자가 페이지의 로딩, DOM Ready, Navigation 시간 등이나 사용자가 지정한 지점 간의 시간을 측정하기 위한 Timing API를 다루고 있습니다. 이번 번역은 한순보님께서 수고해주셨습니다. :)
"Performance API는 개발자가 직접 측정하기 어려운 페이지 로딩 시간 등을 조회할 수 있도록 해주며 개발자가 직접 지정한 지점을 표시(.mark() 함수)하고 이를 측정(.measure() 함수)할 수 있도록 해주는 등의 스크립트 수준에서의 성능 측정 방법을 제공합니다. Performance API를 이용하면 로딩, 렌더링부터 함수 혹은 특정 실행 사이클을 가지는 모듈의 측정 등 다양한 형태로도 활용할 수 있는 가능성이 있습니다. 프로젝트에서 개발자도구만으로 측정할 수 없는 부분이 있다면 Performance API를 개발 작업흐름 내에 포함하는 것도 좋은 방법이 될 것입니다."
TL;DR;
최적화에 있어서 가장 첫번째 단계는 병목 지점을 찾아내기 위한 측정(Measure)입니다. 반대로 이야기하자면 측정이 없다면 단지 경험과 시간을 사용하여 수정하고 테스트하는 반복적인 과정을 피할 수 없습니다. 물론 개발자 도구에서 렌더링이나 리소스에 대한 로딩 타임들을 측정할 수 있지만 이는 우리의 프로젝트에서 일부에 불과합니다.
User Timing API는 이렇게 도구에서 지원하지 않는 코드 상의 측정을 위한 기능들을 다음과 같이 제공합니다.
(Perfomance API는 아래에서 언급하는 내용 이외에도 Navigation에 대한 정보 그리고 Chrome의 경우 여기에 메모리 사용량도 지원하지만 이 튜토리얼에서는 다루지 않습니다.)
고해상도 시간(High Resolution Time)
- W3C의 규격에서 High Resolution Time이란 밀리초(msec) 이하의 시간 단위를 말합니다. 이는 보다 정밀한 시간 측정이 가능하므로 아주 짧게 실행되는 코드에 대한 반복적인 실행 없이 시간 측정이 가능한 것을 뜻합니다.
- 기본적으로 사용자 타이밍 인터페이스는 개발자가 직접 측정하기 어려운 URL 요청, 응답, 페이지 로딩 시간, DOM 로딩, 완료 등에 대한 지점(Mark)를 기본으로 포함합니다.
 |
| [그림] performance.timing이 가진 기본 Mark들 |
- User Timing API는 사용자 타이밍 인터페이스의 기본 지점과 사용자가 직접 지점을 설정 및 해제할 수 있으며 이를 기반으로 하는 측정 시간과 데이터 액세스 기능을 제공합니다.
- 설정 및 해제
- .mark()/.clearMarks() : 사용자 지점 설정/해제
- .measure()/.clearMeasures() : Mark 간의 시간 측정 설정/해제
- 데이터 액세스
- .getEntriesByType() : 주어진 타입('mark' 혹은 'measure')에 대한 엔트리 반환
- .getEntriesByName() : 주어진 이름에 따른 엔트리 반환
이 튜토리얼은 이러한 API의 사용 방법부터 Ajax 호출에 대한 성능 측정 방법에 대해 다루고 있습니다. 보다 자세한 내용은 튜토리얼을 참고하시기 바랍니다.
번역 링크
- 사용자 타이밍 API: 웹앱의 이해
- 원문 - User Timing API Understanding your Web App
- 번역 - 사용자 타이밍 API: 웹앱의 이해, Live!
댓글 없음:
댓글 쓰기