2014년 3월 6일 목요일

[튜토리얼/한글화] 자바스크립트 성능 수수께끼를 해결하기 위한 과학적인 검출 방법 사용하기(Use forensics and detective work to solve JavaScript performance mysteries)

HTML5Rocks에 +John McCutchan의 '자바스크립트 성능 수수께끼를 해결하기 위한 과학적인 검출 방법 사용하기(Use forensics and detective work to solve JavaScript performance mysteries)' 한글 튜토리얼이 업데이트되었습니다.

당연한 얘기지만 모든 최적화는 문제가 되는 지점을 개선하는 작업입니다. 당연한 얘기겠지만 이러한 이유로 성능 병목 지점을 찾는 것이 가장 첫번째 단계입니다. 문제의 원인을 찾으면 여러가지 테크닉 중 어떤 것을 선택해서 해결할 수 있는지에 대한 방법을 결정할 수 있을 것입니다. 이 튜토리얼은 Find Your Way to Oz의 개발 과정에서 성능 문제를 개선하기 위해 병목 지점들을 찾는데 사용된 방법을 다루고 있는 사례 연구이기도 하며 실질적인 가이드라인이기도 합니다.

이번 번역은 +Jae-Hoon Kim님께서 수고해주셨습니다. GDG Seoul 2월 밋업에서의 발표 후 얼마 안되서 바로 참여해주셨는데 감사드립니다. :)

"가비지 콜렉션이나 로직 오버헤드, 렌더링 오버헤드  혹은 리소스 로딩으로 인한 jank 등 하나의 어플리케이션에서 성능에 영향을 주는 요인은 굉장히 많습니다. 점진적으로 하나씩 개선해나가는 방식도 좋지만 가능하다면 가장 큰 요인 중 가장 쉽게 해결할 수 있는 것들부터 찾아나가거나 다른 기준에 의해 성능을 개선할 수도 있을 것입니다. 만약 이러한 방식을 원하신다면 그 무엇보다도 우선시되어야 할 작업은 최적화가 아닌 진단입니다."



TL;DR;


최근 몇 년 동안 자바스크립트 가상 머신 기술의 놀라운 진보에도 불구하고, 최근 한 연구는 Google 어플리케이션이 그들의 시간 중 50~80%를 V8에서 보내고 있음을 증명하였습니다. CPU 사이클은 하나의 제로-썸 게임입니다. 시스템 리소스를 더 적게 사용하도록 하는 것은 더 높은 성능을 보여주는 방법이며 고성능 실시간 어플리케이션에서 무엇보다 중요합니다.

성능 문제를 해결하는 것은 범죄를 해결하는 것과 유사합니다. 여러분은 조심스럽게 증거를 조사하고 의심되는 원인들을 확인하고 다른 해결책들을 실험하는 것이 필요합니다. 이러한 과정 내내 문제를 실제로 고쳤는지 확인할 수 있도록 반드시 측정된 결과들을 문서화해야 합니다.

이 튜토리얼은 Find Your Way to Oz의 모호한 성능 문제를 찾아내고 자바스크립트를 최적화와 프로파일링한 방법들을 다루고 있습니다. Oz의 경우 가설을 통해 최종적으로 선택된 두 개의 용의자가 있었으며 이를 V8 엔진의 로그와 V8 내부의 최적화에 관련된 추적을 통해 정확한 문제점을 도출하고 자바스크립트 for-in 구문의 수정을 통해 성능을 개선하였습니다.

> 자바스크립트의 로그를 이용한 성능 요인 검출 방법


V8 자바스크립트 엔진은 내장된 로깅 시스템을 가지고 있습니다.

터미널에서 "--no-sandbox --js-flags="--prof --noprof-lazy --log-timer-events" 인자들을 이용하여 크롬을 실행하고 어플리케이션을 구동한 뒤 종료하면 현재 디렉터리 안에 v8.log 파일이 생성됩니다. 이렇게 생성된 로그는 tick processor와 plot-timer-event를 통해 분석할 수 있습니다.


> V8 최적화의 추적


V8의 자바스크립트 성능 관련 팁들에서 언급된 바 있듯이 V8은 높은 성능을 위해 실행 시간에 자바스크립트에 대한 많은 최적화를 수행합니다. 만약 이 과정에서 의심되는 문제가 있다면 터미널에서 "--js-flags="--trace-deopt --trace-opt-verbose" 인자를 통해 크롬을 실행하여 상세 로그를 확인할 수 있습니다.


자세한 내용은 튜토리얼을 참조하시기 바랍니다.


번역 링크

참고 글