[Javascript] 웹 워커, Web Worker

Web Worker
 script 실행을 백그라운드 쓰레드에서 실행
Worker 내에서는 DOM을 직접 다룰 수 없음
Message System을 통해 Worker와 메인 쓰레드 간 통신

시작 : new Worker()
종료 : webworker.terminate();

Worker.postMessage() : worker -> main
Worker.onmessage : main 에서 받음



http://tcpschool.com/html/html5_api_webWorker
예제) http://tcpschool.com/examples/tryit/tryhtml.php?filename=html5_api_webWorker_01

 

<p>현재까지 발견한 소수의 개수는 <output id="result"></output>입니다.</p>
<button onclick="startWorker()">Web Worker 시작</button> 
<button onclick="stopWorker()">Web Worker 종료</button>
<p>위의 스크립트가 실행되는 동안에도 텍스트 필드에 글을 쓰는 작업을 동시에 할 수 있습니다!</p>
<textarea rows="10" cols="50"></textarea>
<script>
	var webworker;
	function startWorker() {
		if(typeof(Worker) !== "undefined") {		// web worker 지원 여부 확인
			if(typeof(webworker) == "undefined") {	// web worker 객체 생성
				webworker = new Worker("/examples/media/web_worker.js");
			}
			webworker.onmessage = function(event) {	// web worker 객체와의 연결
				document.getElementById("result").innerHTML = event.data;
			};
		} else {
			document.getElementById("result").innerHTML = "이 문장은 사용자의 웹 브라우저가 Web Worker API를 지원하지 않을 때 나타납니다!";
		}
	}
	function stopWorker() { 
		webworker.terminate();	// web worker 객체의 실행 종료
		webworker = undefined;	// web worker 객체의 재사용
	}
</script>

//===============
//참고
https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API