Rev. 2.73


마우스 왼쪽 버튼을 클릭하면 작은 사각형 물체를 생성하며, 오른쪽 버튼을 클릭하면 화면을 초기화 합니다.

얼마전 Web Worker(DOM Worker)의 사용방법을 간략하게 알아보고 실제로 적용할 수 있는 분야를 곰곰히 생각해 보면서 여러가지 실험을 시도했습니다. 위 화면은 워커(싱글스레드)에 의해 드로잉되는 Box2D 물리엔진입니다. 순수 자바스크립트로 드로잉 되는 예제와 직접 비교해 보세요. 지속적으로 생성되는 사각형들의 인스턴스 단위로 스레드를 할당해 보려고 시도 했지만 번번히 실패하고 말았습니다. 시간이 허락한다면 멀티스레드가 가능하도록 재시도 해 볼 생각입니다.

John Resig씨도 워커를 이용하여 RayTracing, Movement Tracking흥미로운 멀티스레드 실험들을 시도했더군요. 그리고 Rick Waldron씨는 워커를 PHP와 연동하여 Ajax로 통신하는데 성공하였습니다. 브라우저로 하여금 비교적 많은 리소스를 요구하는 Ajax 통신에 워커를 사용하는 아이디어는 매우 현실성 있어 보입니다. 그래서 실험적으로 Prototype의 Ajax.Request 메서드를 워커에서 실행하도록 교체하여 사용해 보고 있는데요. 브라우저가 조금은 덜 힘들어 하는 것을 직접적으로 느낄 수 있었습니다. 문제점이라면 파이어폭스에서 간헐적으로 죽는 현상이 발생하며, 송/수신 패킷이 모니터링하기가 힘들다는 점 정도입니다. 웹 워커에 점점 빠져들고 있어요.

Comments

파이어폭스 3.5에 추가된 기능인 DOM Workers를 테스트 해 보았습니다. 자바스크립트로 멀티스레드(multi-thread)를 구현할 수 있다길레 솔깃해서 살펴보았습니다. 'Worker'로 새 인스턴스를 만들어서 'onmessage', 'onerror', 'postMessage' 메서드로 변수를 전달하고 결과물을 돌려받을 수 있는 실행구조를 가지고 있었습니다. 인스턴스를 생성할 때에는 자바스크립트 파일을 로드하여 이루어지며, 여기에 사용되는 자바스크립트는 DOM에 직접 액세스 할 수 없고 네임스페이스 역시 공유하지 않습니다. 즉, 연산만을 죽어라 수행하도록 디자인 된 것입니다.

function fibonacci(n) {
  return (n < 1) ? -1 : (n > 2) ? fibonacci(n - 1) + fibonacci(n - 2) : 1;
}

onmessage = function(event) {
  return postMessage(fibonacci(event.data));
}

위 코드는 테스트에 사용된 'fibonacci.js' 파일의 내용입니다. 한줄짜리 피보나치(fibonacci) 함수를 호출하고 그 결과를 반환합니다. 이 worker용 자바스크립트 파일은 아래와 같이 사용될 수 있습니다.

var worker = new Worker("/javascripts/workers/fibonacci.js");
worker.onmessage = function(event) {
  alert(event.data);
};
worker.postMessage(10);

실제로 작업 수행이 병렬로 이루어지는지 확인하기 위하여 동일한 피보나치 함수가 worker를 사용하여 실행되는 것과 순수 자바스크립트로 실행한 것을 복합적으로 테스트하고 수행 시간을 측정했습니다. worker가 결과를 응답하는 시간이 매우 불규칙적이고 브라우저가 무작위로 죽어싸서 신빙성 있는 테스트는 어려워 보이네요. 성능 모니터(perfmon.exe)를 토글해서 스레드를 직접 확인해 보세요. 스레드가 급증했다가 줄어들고 그럽디다. 속도도 구린것이 그닥 유용해 보이지는 않군요. 구글 크롬 v8 엔진처럼 자바스크립트 자체를 멀티스레드 처리하는 쪽이 훨씬 현실적이어 보입니다. 이걸 어디다 써먹어나요. 에이~ 완전 뻘짓했네요. DOM Workers는 파이어폭스 부가기능 제작 또는 굉장히 무거운 연산처리에 적합해 보입니다.

DOM workers Test

x

덧. 테스트가 공정하지 못했네요. worker 인스턴스를 지속해서 생성하지 않고 참조하게 했더니 속도가 크게 개선되긴 했습니다만, 순수 자바스크립트만 못한 것은 사실이네요. 백그라운드에서 도는 프로그램에 사용하면 좋겠다는 생각을 했습니다.

Comments

chart.gif

새 자바스크립트 엔진인 TraceMonkey가 탑재된 파이어폭스 3.5가 출시되었습니다. 기존의 SpiderMonkey 엔진보다 약 3배 빠르다고 합니다. 위 그래프는 개인적으로 수집한 TaskSpeed결과입니다. 재미있게도 jQuery를 제외한 나머지 자바스크립트 라이브러리들은 모두 속도가 향상 되었습니다. 특히, Prototype의 속도가 크게 개선된 것으로 기록되었습니다. 원인이 무엇일까요? Monad(펑셔널 프로그래밍)는 JIT 컴파일러에 적합하지 않기 때문일까요? 이와 같은 양상은 최근에 출시된 브라우저들에서 두드러지게 나타납니다.

우측 그림은 SunSpider 벤치마크를 이용하여 한딱가리(?) 하고있는 브라우저들의 자바스크립트 엔진성능을 측정 하고 최종집계 시간을 비교한 그래프입니다. V8이나 Nitro(SquirrelFish)의 속도를 따라 잡지는 못했더군요.

어찌됐든 파이어폭스 3.5의 출시는 환영할 일입니다. HTML5 공식 지원을 포함한 오픈 비디오 및 오디오, 새로운 CSS 속성들, Cross-site access XMLHttpRequest, DOM workers, Native JSON 등 다양한 새로운 기술들을 이용할 수 있기 때문이죠.

Comments