Web workers 사용하기
이 글은 bespin 프로젝트에서 Web Workers를 이용하여 많은 대단한 기능들을 구현한 Malte Ubl가 작성한 글입니다.
최근들어 웹어플리케이션의 사용자 경험(UX)는 점점 더 화려하고 풍부하게 발전되어 왔습니다. GMail, Meebo 그리고 Bespin같 은 브라우저 안에서 동작하는 어플리케이션들은 미래의 웹이 어떻게 보여지고 느껴질지에 대한 그림을 보여주고 있습니다. 좋은 사용자경험(UX)을 완성하는데 있어 중요한 요소중에 하나가 사용자의 동작에 빠르게 반응하는 어플리케이션을 만드는 것입니다. 사용자는 어플리케이션이 한동안 어떤일을 수행하면서 사용자의 반응에 응답하지 못하고 멈춰있는 동안의 기다림을 싫어하기 때문이죠.
자바스크립트 프로그래밍 언어는 현대 클라이언트 기반 웹 어플리케이션의 핵심이라고 할 수 있습니다. 자바스크립트와 DOM은 본래 단일 스레드로 동작합니다. 이것은 자바스크립트가 어떤 특정 시점에 오직 하나의 일만 수행할 수 있다는 의미입니다. 32개의 코어를 가지고 있는 컴퓨터라 할지라도 오래 걸리는 연산을 수행할때 여전히 그 중의 하나의 코어만 사용된다는 것입니다. 예를 들어, 달로 가는 최적의 궤적을 계산하여 화면에 그 궤적을 애니메이션으로 보여주는 어플리케이션에서 궤적을 계산하는 동안은 동시에 그 궤적의 애니메이션을 화면상에 보여줄 수 없다는 것입니다. 그뿐만 아니라 계산 도중에는 마우스 클릭이나 키보드 입력에 전혀 반응 할 수도 없는 것이죠.
동시성(Concurrency)
동시성은 집중적인 계산을 수행중에도 반응성을 유지하기 위한 방법으로 사용되어 지는 최근 현대 프로그래밍 언어의 한 부분입니다. 예전에는 종종 스레드를 사용하여 동시성을 처리하였습니다. 그러나 스레드의 경우 다수의 다른 스레드에서 동시에 같은 데이타를 처리할때 매우 난해한 오류나 복잡한 현상을 자주 일이켜 프로그래머로 하여금 프로그램 흐름의 이해를 어렵게 만들기도 합니다.
WHATWG으로 부터 추천되고 Firefox 3.5에 추가된 WebWorkers는 멀티스레딩을 이용한 프로그램에서 야기되던 문제들 없이도 동시성을 자바스크립트 어플리케이션에서 동작하도록 해줍니다. 사용법은 쉽습니다. 단지 Worker 인터페이스를 사용하기만 하면 됩니다.
아래의 예제에서 worker.js 파일이 로드되고 코드를 실행하기 위해 새로운 스레드가 생성될 것입니다.
// Start worker from file "worker.js"
var worker = new Worker("worker.js"); 주 화면 스레드와 workers 사이의 정보교환은 postMessage 함수를 이용하여 정보를 전달함으로 이루어집니다. postMessage는 다수의 윈도우간의 정보교환을 목적으로 Firefox3에 추가되었습니다. worker에서 페이지로 정보를 보내기 위해서는 단순히 메시지를 보내기만 하면 됩니다.
// Send a message back to the main UI thread
postMessage("Hello Page!"); worker로 부터 메시지를 받기 위해서는 worker 오브젝트에 “onmessage” 콜백을 등록해야합니다. 여기에 콜백 함수로 전달되는 이벤트 데이타를 경고창으로 보여줍니다. 이 경우 “event.data”는 위 예제에서 보내진 메시지인 “Hello Page!” 문자를 가지게 됩니다.
worker.onmessage = function (event) {
alert(event.data);
// Send a message to the worker
worker.postMessage("Hello Worker");
} worker에 메세지를 전달하기 위해서 worker 오브젝트의 postMessage를 호출합니다. worker안에서 메세지를 받기 위해서 onmessage 함수를 정의하면 메세지가 worker로 전달될때마다 이 함수가 불리게됩니다.
에러 핸들링
worker에서 발생할 수 있는 실행 오류를 처리할 수 있는 방법으로 두가지가 있습니다. 첫째는 worker안에 onerror 함수를 설정하는 것과 둘째로 worker 외부에서 onerror 핸들러를 설정하여 오류를 처리하는 것입니다.
worker.onerror = function (event) {
alert(event.message);
event.preventDefault();
} event.preventDefault() 함수는 기본 동작을 수행하지 않도록 막는 역할을 합니다. 예를 들어 오류가 발생했을때 유저들에게 오류 메시지를 보여주거나 최소한 오류 메세지 콘솔에 보여주는 기본 동작을 막는 것입니다. 여기 예제에서는 기본 동작 수행 대신 경고만 하는 것을 보여줍니다.
아무것도 공유하지 않음
workers는 그와 연계되어 있는 페이지나 다른 workers들과 상태값을 전혀 공유하지 않습니다. 그들이 서로 소통할 수 있는 유일한 방법은 postMessage를 이용하는 것입니다. 또한 workers는 DOM에 대한 접근 권한이 없어서 직접 웹페이지를 조작할 수가 없습니다. 따라서 여러 workers가 동시에 같은 데이터를 조작하려고 할때도 데이터 무결성에는 전혀 문제의 위험이 없다고 할 수 있습니다.
workers를 이용한 표준 설치는 유저 이벤트를 처리하는 여러개의 자바스크립트 응용 페이지들로 구성되어 있을 수 있습니다. worker에게 집중적인 계산을 하라는 메세지가 발생하면 worker는 계산을 시작합니다. 그렇더라도 페이지의 스크립트는 바로 중지하고 다른 유저 이벤트들을 들을 수 있게 됩니다. worker가 계산을 마무리하는 즉시 결과값을 표시하는 페이지에 결과 값 반환 메세지를 보낼 수 있습니다.
스크립트가 수행을 하는데 오랜 시간이 걸릴때면 브라우저가 보여주곤 했던 무반응 스크립트에 대한 경고는 web workers를 사용할 경우 옛말이나 다름없게 되었습니다.
피보나치 예제
다음은 0부터 99까지 피보나치 수를 백그라운드에서 계산을 하는 worker의 예제입니다. 사실 굉장히 비효율적인 방법으로 비교적 큰 숫자(30보다 큰)의 피보나치 숫자를 계산을 할 경우 시간이 매우 오래걸리기 때문에 스크립트가 당신의 컴퓨터에서 절대 끝나지 않을 수도 있습니다.(아니면 스택 오버플로우로 멈춰버리거나) 그러나 worker안에서 이를 수행할 경우 메인 웹 페이지의 반응성에는 전혀 영향이 없습니다. 따라서 당신은 다음 숫자를 기다리는동안 약간의 재미요소로 복잡한 애니메이션도 그릴 수 있습니다.
이 HTML 페이지는 “fib-worker.js” 파일에 worker를 실행 시키는 스크립트를 포함하고 있습니다. worker에서 나오는 메시지는 console.log를 통해 브라우저의 콘솔창에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Web Worker API Demo</title>
<script type="text/javascript">
var worker = new Worker("fib-worker.js");
worker.onmessage = function (event) {
console.log(event.data.index +" -> " + event.data.value)
}
</script>
</head>
<body>
</body>
</html> worker가 구현되어 있는 자바스크립트는 피보나치 숫자를 계산하고 결과를 페이지에 전송하는 루틴을 포함하고 있습니다.
// File fib-worker.js
function fib(n) {
return n < 2 ? n : fib(n-1) + fib(n-2);
}
for(var i = 0; i < 100; ++i) {
postMessage({
index: i,
value: fib(i)
})
} 위에 예제에서 우리는 postMessage로 복잡한 오브젝트를 전달할 수 있는 것을 볼 수 있습니다. 이 오브젝트들은 JSON을 통해 전달될 수 있는 모든 것을 포함할 수 있습니다. 이는 함수는 worker의 경계를 가로질러 전달될 수 없으며 오브젝트는 reference가 아닌 value에 의해 전달된다는 뜻입니다.
Worker APIs
worker는 importScripts라는 함수를 지원합니다. 이것은 더 많은 소스 파일을 worker에 로드할때 사용할 수 있습니다.
importScripts("file.js");
importScripts("foo.js", "bar.js"); 여러 파라미터를 함수에 전달할때 스크립트는 동시에 다운로드 되어지나 실행은 명시된 순서에 의해 되어집니다. 이 함수는 모든 스크립트가 다운로드되고 실행되기 전까지 리턴하지 않습니다.
여기서 우리는 문자열로부터 SHA-1 해쉬 합을 계산하는 외부 자바스크립트를 로드하여 AJAX 요청으로 부터 해쉬 결과를 얻는데 사용합니다. 또한 onmessage 이벤트를 통해 전달되는 URL 정보를 받기 위해 표준 XMLHttpRequest 객체를 사용하는데 흥미로운 점은 worker 스스로가 페이지 렌더링을 함에 있어 비동기적으로 동작하므로 굳이 AJAX 요청을 비동기적으로 처리하는 것에 대한 걱정을 할 필요가 없다는 것입니다. 그러므로 HTTP 요청을 위한 약간의 기다림이 크게 문제 되지는 않을 것입니다.
importScripts("sha1.js")
function onmessage(event) {
var xhr = new XMLHttpRequest();
xhr.open('GET', event.data, false);
xhr.send();
postMessage(sha1(xhr.responseText));
} Workers에서 사용 가능한 다른 API들
위 예제에서 본것 처럼 workers는 AJAX 요청을 위해 XMLHttpRequest를 사용할 수 있으며 web storage API를 사용하여 클라이언트의 데이타베이스를 접근할 수도 있습니다. 여기서 사용된 API들은 일반 자바스크립트의 사용법과 거의 동일할 것입니다.
현재 브라우저에 대한 정보를 확인할 수 있는 객체로 잘 알려진 navigator object처럼 일정 시간 이후나 특정 시간 간격으로 코드를 실행 할 수 있도록 하는 setTimeout, setInterval (그리고 clearTimeout과 clearInterval) 함수도 worker 안에서 사용이 가능합니다.
더 많은 API들은 이후에 추가될 것입니다.
브라우저 호환성
이 글을 쓰는 시점에는 Firefox 3.5가 post Message를 통해 복잡한 객체를 전달할 수 있는 기능을 지원하고 위 예시에 나와 있는 확장된 API들이 구현되어 있는 유일한 브라우저입니다. Safari 4는 Worker API 중에 매우 기본적인 것들만 구현되어 있습니다. 그 밖의 다른 브라우저는 일찍이 브라우저의 컨셉을 소개한 Google Gears를 통해 Worker 기능을 사용할 수 있습니다.
실 사용 예제
브라우저 기반의 소스 코드 에디터의 Bespin project 에서는 실시간 오류 검사 및 자동 완성 기능 등 CPU를 많이 사용하는 기능등을 worker를 이용해 성공적으로 구현하였습니다. 또한 Google Gears에 Worker API를 구현한 a shim 을 만들고 거기에 Safari 4에 빠져 있는 Worker 기능을 추가하였으며 postMessage 인터페이스 위에 transparent custom evnets를 사용하도록 하였습니다. 이 콤포넌트들은 후에 다른 프로젝트에서 사용할 수 있도록 단독 라이브러리 형태로 제공될 것입니다.
Web Workers는 정교한 어플리케이션을 위해 Open Web이 조금 더 강력한 플랫폼으로 자리 매김하는데 있어 중요한 역할을 할 것입니다. 왜냐하면 결국에 모든 것들은 자바 스크립트를 통해 처리되곤한느데 이런 스크립트가 web workers의 화려한 기능을 통해 클라이언트에서 쉽게 동작할 수 있기 때문입니다. 따라서 당장 오늘 당신의 어플리케이션에 이를 추가하여 사용자에게 조금 더 좋은 반응성과 즐거움을 느끼게 해주길 바랍니다.
원저자: Eric Shepherd – 원문으로 가기
Sencha Touch Charts breathes new life into your data and utilizes hardware acceleration for optimized performance. With natural gestures in Sencha Touch Charts, visualizing and understanding complex datasets is effortless. Pinch-to-zoom, swipe-to-pan across data, and tap for deep dives. Data flows come to life with every tap, pinch, and swipe.
Sencha Touch Charts uses HTML5 capabilities like Canvas elements for drawing and CSS3 for styling, delivering the highest performance and richest experience in today’s mobile web browsers. All touch events use Sencha Touch’s sophisticated events and gesture system which is optimized for modern mobile web browers.
Built on top of our industry-leading mobile web app framework, 