이 글은 Alon Zakai 와 Robert Nyman [Editor]이 쓴 asm.js performance improvements in the latest version of Firefox make games fly!의 한국어 번역본입니다.

지난주 발표된 파이어폭스 최신버전은 사용자 인터페이스를 비롯 싱크(Sync) 등의 기능을 크게 개선했습니다. 최신버전을 통해 크게 개선된 또다른 기능은 바로 asm.js 실행성능입니다. 곧이어 보게 되겠지만 이는 게임 같은 분야에서 특히 중요합니다. 파이어폭스의 개선된 실행성능을 알아보기 위해 파이어폭스와 다른 브라우저들을 비교한 벤치마크 결과를 살펴봅시다. 벤치마크 결과를 보면 파이어폭스가 asm.js 코드를 더 빠르게 처리하는 것을 알 수 있습니다.

asm.js 실행성능 향상

asm.js는 최적화에 적합한 형태를 가진 자바스크립트의 부분집합(subset)입니다. asm.js는 특히 C 나 C++ 코드를 웹으로 포팅하는데 유용합니다. 우리는 이미 파이어폭스가 어떤 방법으로 asm.js의 32-bit 부동소수연산(floating point operation) 코드를 최적화 하는지에 대해 블로그 기사를 쓴 바 있습니다. 이 방법 뿐 아니라 asm.js 최적화를 위한 다른 모든 방법들을 동원해서 파이어폭스는 동일한 코드를 C/C++로 작성해서 실행시켰을 때보다 asm.js 코드로 작성해서 실행시켰을 때 겨우 1.5배만 느리게 실행시킬 수 있습니다. 네이티브 보다 실행속도가 느리지만 그 차이가 크게 좁혀지고 있습니다. 블로그 기사를 낼 당시에는 이런 최적화가 나이틀리(nightly) 빌드에만 존재했었습니다. 하지만, 이제 파이어폭스 29를 통해 수억명의 사용자들이 이용할 수 있습니다. 파이어폭스 29는 현재 시점의 정식 배포본입니다.

또다른 중요한 asm.js 최적화 개선점은 시작속도와 관련된 것입니다. 몇 달 전 Luke가 올린 블로그 기사의 내용처럼, 이제 파이어폭스는 실행시간전(AOT: Ahead Of Time) 컴파일 결과를 캐시에 저장할 수 있습니다. 이를 통해 시작속도를 크게 개선했습니다. 이런 최적화 기법도 파이어폭스 29를 통해 사용자들에게 전달됐습니다.

웹 브라우저 비교

이런 모든 최적화가 반영된 지금, 최신 브라우저들 사이의 asm.js 코드 실행성능을 비교해 보는 것은 꽤 흥미있는 일일 것입니다. 위의 그래프는 Emscripten 벤치마크 슈트(benchmark suite)를 구글 크롬, 인터넷 익스플로러, 파이어폭스의 Windows 8.1 최신 안정화 버전에서 실행시킨 결과입니다. 여기 제시된 모든 결과에서 작은 숫자일수록 더 좋은 결과를 나타냅니다. 모든 결과는 실제 사용되는 코드를 asm.js로 컴파일해서 얻었습니다 (그래프에 적힌 노트를 참조하세요).

Unity, Emscripten, 그리고 asm.js

asm.js는 자바스크립트의 부분집합(subset)입니다. 말하자면 asm.js는 세상에 존재하는 다양한 자바스크립트 코딩 스타일 중 하나일 뿐입니다. 하지만 asm.js에는 중요한 유스케이스(use case)가 존재합니다. 우리(모질라)가 GDC에서 발표한 바와 같이, 시장에서 가장 인기 있는 게임 제작 도구 중에 하나인 Unity가 Emscripten을 이용해서 그들의 엔진을 asm.js로 컴파일하는 방식으로 웹을 지원할 것입니다.

비디오가 실제의 것을 대신할 수는 없습니다! 당신은 비디오에 보여진 게임을 지금 당장 브라우저에서 경험할 수 있습니다! Unity가 최근에 릴리즈한 Dead Trigger 2와 Angry Bots 데모를 실행시켜보세요. 이 데모들을 Firefox 최신버전에서 실행시켜 보면, 앞서 언급한 asm.js 최적화 기법들이 실제 동작하는 것을 볼 수 있습니다. 예를 들어 데모 링크들을 한번 이상 방문하면 asm.js 캐시 기능 덕분에 게임이 다시 컴파일되지 않을 것입니다 (그래서 처음보다 빨리 시작될 것입니다), 그리고 asm.js의 빠른 실행속도 덕분에 게임이 부드럽게 실행될 것입니다.

asm.js 스타일의 자바스크립트 코드를 효과적으로 실행시킬 수 있는 덕분에 폐쇄적이고 비표준적인 플러그인 없이도 이런 게임들을 웹에서 제대로 경험할 수 있습니다. 바로 파이어폭스 29에서 asm.js가 더욱 최적화된 것이 그토록 반가운 이유입니다. 가끔 벤치마크 결과가 모호한 숫자에 불과한 것처럼 느껴질 때도 있지만, asm.js의 향상된 벤치마크 결과는 게임 실행속도에 실제로 영향을 미칩니다. 게임이 실행성능이 매우 중요하고 바로 눈에 띄는 분야이기 때문입니다.

(벤치마크 측정에 도움을 준 Marc Schifer에게 감사를 전합니다.)