Html5/web-workers - Revision history

Maintenance script: Repair MoniWiki formatting after migration

2026-03-29T00:34:57Z

Repair MoniWiki formatting after migration

← Older revision		Revision as of 00:34, 29 March 2026
Line 20:		Line 20:

	= 워커의 생성 =		= 워커의 생성 =
	* 워커 인터페이스 생성자에 JavaScript 소스 파일의 URL인수로 전달하면 소스파일을 내려받아 백그라운드에서 실행한다		* 워커 인터페이스 생성자에 [[JavaScript]] 소스 파일의 URL인수로 전달하면 소스파일을 내려받아 백그라운드에서 실행한다
	* 지역변수, 지역함수이므로 외부에서 호출 불가!		* 지역변수, 지역함수이므로 외부에서 호출 불가!
	// workers.js를 실행하여 워커를 생성		// workers.js를 실행하여 워커를 생성

Maintenance script: Repair batch-0008 pages from live compare

2026-03-27T01:40:37Z

Repair batch-0008 pages from live compare

← Older revision		Revision as of 01:40, 27 March 2026
Line 66:		Line 66:
	http://cdkkcdkktoandroid.tistory.com/12		http://cdkkcdkktoandroid.tistory.com/12
	http://seye2.egloos.com/2451233		http://seye2.egloos.com/2451233

imported>rabierre at 10:20, 13 October 2010

2010-10-13T10:20:23Z

← Older revision		Revision as of 10:20, 13 October 2010
Line 61:		Line 61:
	* onmessage(), postMessage(), onconnect()등 사용가능		* onmessage(), postMessage(), onconnect()등 사용가능
	* (TODO : 표 추가 필요)		* (TODO : 표 추가 필요)

			= 참고 =
			http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=141&social=1
			http://cdkkcdkktoandroid.tistory.com/12
			http://seye2.egloos.com/2451233

imported>rabierre at 10:17, 13 October 2010

2010-10-13T10:17:03Z

← Older revision		Revision as of 10:17, 13 October 2010
Line 42:		Line 42:
	// 처리		// 처리
	};		};
			= 워커 생성 =
			* 워커생성 : Worker 이용
			// worker.js이용해 생성
			var worker = new Worker("worker.js");
			* 공유 워커 생성 : SharedWorker 이용
			** 공유 워커는 윈도우가 달라도 URL과 이름이 같으면 같은 프로세스 공유
			var worker1 = new SharedWorker("worker.js", "wk");
			var worker2 = new SharedWorker("worker.js", "wk");

	= 워커 객체의 메소드 =		= 워커 객체의 메소드 =

imported>rabierre at 10:12, 13 October 2010

2010-10-13T10:12:37Z

← Older revision		Revision as of 10:12, 13 October 2010
Line 24:		Line 24:
	// workers.js를 실행하여 워커를 생성		// workers.js를 실행하여 워커를 생성
	var worker = new Worker("worker.js");		var worker = new Worker("worker.js");

			= 워커와의 통신 =
			* 워커에게 메세지 송신
			** 워커와의 메세지 통신은 postMessage()를 이용
			// 워커에게 메세지 hello보냄
			worker.postMessage("hello");
			// 워커에서의 메세지 처리
			onmessage = function(e){
			// 처리
			};

			* 워커의 메세지 송신
			// 전역함수 postMessage 사용
			postMessage("hello");
			// 워커의 메세지 처리
			worker.onmessage = function(e){
			// 처리
			};

			= 워커 객체의 메소드 =
			* onerror : 에러 포착하기 위한 이벤트 핸들러
			* terminate() : 워커 강제 종료
			* postMessage(message, [ports]) : 워커에게 메세지 보냄
			* onmessage() : 워커로부터의 메세지 수신을 위한 이벤트 핸들러

			= 워커에서 사용가능한 변수, 메서드, 생성자 =
			* window, document사용 불가
			* onmessage(), postMessage(), onconnect()등 사용가능
			* (TODO : 표 추가 필요)

imported>rabierre at 09:56, 13 October 2010

2010-10-13T09:56:40Z

New page

= WEB WORKERS =
* 웹 워커 : 자바스크립트 코드를 백그라운드에서 실행하기 위한 기술
* 워커 : 백그라운드에서 실행되는 코드, UI(DOM)과는 완전히 분리된 환경에서 동작
** 현재 브라우저와 웹어플리케이션이 가진 설계상의 문제로 생겨남

* 현재 웹브라우저는 웹페이지를 하나의 스레드로 실행
** 처리할 내용이 많아지면 사용자는 페이지를 조작할 수 없음
** 이 문제를 해결하기 위해 Web workers를 사용
** web workers가 메인 스레드(웹 페이지)와는 별도의 백그라운드 프로세스로 자바스크립트 실행
** 병렬 처리가능

* 종류
** 일 대 일 : <워커>, 하나의 워커 객체와 하나의 백그라운드 프로세스가 일대일로 대응
** 다 대 일 : <공유 워커>, 여러개의 워커 객체가 하나의 백그라운드 프로세스와 대응

= 워커를 이용한 프로그래밍 =
* 워커는 생성시부터 UI와 다른 스레드에서 동작
** UI와 워커 스레드는 변수를 공유할 수 없다.
** 따라서 워커는 DOM에 접근할 수 없다.

= 워커의 생성 =
* 워커 인터페이스 생성자에 JavaScript 소스 파일의 URL인수로 전달하면 소스파일을 내려받아 백그라운드에서 실행한다
* 지역변수, 지역함수이므로 외부에서 호출 불가!
// workers.js를 실행하여 워커를 생성
var worker = new Worker("worker.js");