전용 웹 워커 (전용 웹 워커)는 웹 컨텐츠가 스크립트를 백그라운드에서 실행할 수있는 간단한 방법을 제공합니다. 작업자가 생성되면 메시지를 제작자가 지정한 이벤트 모니터링 함수로 전달하여 작업자가 생성 한 모든 작업이 이러한 메시지를받을 수 있습니다. 작업자 스레드는 간섭 UI없이 작업을 수행 할 수 있습니다. 또한 I/O 작업을 수행하기 위해 XMLHTTPREQUEST (ResponseXML 및 Channel의 두 속성 값이 항상 NULL이지만)를 사용할 수도 있습니다. 이 기사는 이전 문서를 구성하는 예와 세부 사항을 제공합니다. 작업자에게 제공된 기능은 작업자가 지원하는 기능을 나열합니다.
작업자 인터페이스는 실제 운영 체제 레벨 스레드를 생성합니다. 그러나 웹 워커의 경우 다른 스레드와의 통신 지점이 신중하게 제어되므로 합병증을 유발하기가 어렵습니다. 비 스레드 보안 구성 요소 또는 DOM에 액세스 할 수있는 방법이 없습니다. 따라서 노력을 기울이지 않으면 실수를 할 수 없습니다. 노동자를 생성하십시오
새로운 작업자를 만드는 것은 매우 간단합니다. Worker () 생성자에게 전화를 걸고 작업자 실에서 실행되는 스크립트를 실행 해야하는 URI를 지정하면 작업자의 OnMessage 속성을 다음으로 설정할 수 있습니다. 특정 이벤트 처리 기능.
var myworker = new Worker (my_task.js); myworker.onmessage = function (oevent) {console.log (Worker가 Back!/n);};또는 addeventListener ()를 사용할 수도 있습니다.
var myworker = my_task.js); 노동자.
이 예제의 첫 번째 줄은 새 작업자 스레드를 만듭니다. 세 번째 행위는 메시지 이벤트의 모니터링 기능을 설정합니다. 작업자가 자체 postMessage () 함수를 호출하면이 이벤트 처리 기능이 호출됩니다. 마지막으로, 작업자 스레드는 일곱 번째 줄에서 시작되었습니다. 참고 : 작업자 생성자를 전송하는 매개 변수 URI는 상동 전략을 따라야합니다. 현재 다른 브라우저 제조업체는 어느 URI가 상 동성 전략을 따라야하는지에 대해 여전히 다릅니다. Blob uri. 그것은 작업자에게 효과적인 대본입니다.
데이터를 전달합니다홈페이지와 작업자 사이에서 전송 된 데이터는 공유되지 않고 복사됩니다. 작업자에게 전달 된 물체는 직렬화되어야하며 다음 끝은 직렬화되어야합니다. 페이지는 작업자와 동일한 예를 공유하지 않습니다. 대부분의 브라우저는 구조화 된 사본을 사용 하여이 기능을 달성합니다.
내려 가기 전에 가르치기 위해 EmulatingMessage ()라는 기능을 만들어 봅시다.
함수 EmulatingMessage (vval) {return eval; // objectalert (exampleatingmessage (examply1); // test #2var example2 = true (type oftof example2); // booleanalert (EmulatingMessage (expame2)); // Boolean // test #3v #3v a). , 나이 : 43}; var example 5 (cat, 3);공유되지 않은 값을 메시지라고합니다. 작업자에 대해 이야기하겠습니다. PostMessage ()를 사용하여 메시지를 기본 스레드로 전달하거나 기본 스레드에서 다시 보낼 수 있습니다. 메시지 이벤트의 데이터 속성에는 작업자의 데이터가 포함되어 있습니다.
example.html : (홈페이지) :var myworker = my_task.js); ;
참고 : 일반적으로 말하면, 백그라운드 스레드 -작업자를 포함하여 DOM을 운영 할 수 없습니다. 배경 스레드가 DOM을 수정 해야하는 경우 제작자가 이러한 작업을 완료하도록 설립자에게 메시지를 보내야합니다.
보시다시피, 작업자와 홈페이지 사이에서 전송 된 메시지는 원래 유형의 값이더라도 항상 "JSON 메시지"입니다. 따라서 JSON 데이터 및/또는 직렬화 할 수있는 모든 데이터 유형을 전송할 수 있습니다.
postMessage ({cmd : init, timestamp : date.now ()});데이터를 전달하는 예
예#1 : 공통 "비동기 평가 ()"생성
다음 예제는 작업자에서 Eval ()을 사용하여 모든 유형의 비동기 코드를 순서 ::
// syntax : asynceval (code [, listner]) var asynceval = (function () {var alistener = [], oparser = new Worker (data : text/javascript; charset = us-Asciii, onmessage%20%3d%20function %20%28oevent%29%20%7b%0a%09postmessage%28%7b%09%09%22id%22%20oevent.data%2c%09%22%22%3A 3A 3A 3A 3A 3A 3A 3A 3A% 20eval%28oevent.data.code%29%0a%09%7d%29%3b%0a%7d); data.id] (eevent.data.evaluated);} alisteners 삭제 [eevent.data.id];}; : alisteners.length -1, code : scode});};});예제 사용 :
// 비동기 경보 메시지 ... asynceval (3 + 2, function (smessage) {alert (3 + 2 = + smessage); // 비동기 인쇄 ... asynceval (// hello world !!!/,,, function (shtml) {document.body.appendchild (document.creatextnode (shtml);}); .open (/get/, /http://www.mozilla.org/, false);/n/toreq.send (null);/n/treturn oreq.responsetext;/n}););););); );)););)););)));));));));)));));));));))))));예제#2 : JSON의 고급 메소드 전송 및 교환 시스템 생성
매우 복잡한 데이터를 전송해야하고 동시에 홈페이지 및 작업자에서 여러 메소드를 호출 해야하는 경우 다음과 유사한 시스템을 만드는 것을 고려할 수 있습니다.
example.html (메인 페이지) : <doctype html> <html> <gead> <meta charset = utf -8 /> <title> mdn 예제 -질문 가능한 작업자 < /title> <script type = text /javaScript> 인스턴스 메소드 통과 1, 2 등을 통과하는 인수 등 : 작업자의 쿼리 기능을 호출하십시오. 기능) : 리스너 추가 * removelistener (name) : 리스너 Queeryker 인스턴스 인스턴스 특성을 제거합니다. : * DefaultListListener : 기본 청취자는 작업자가 postMessage () 함수를 직접 호출 할 때만 */ 함수 QueryableWorker (SURL, fdeflistener, fonerror) {var. Oinstance = Oworcer = New Worker (SURL), olistener = {}; .data.hasownproperty (rnb93qh) {olisteners [eevent.data.vo42t30] .Apply (oievent.data.rnb99 3qh); {owster.onerror = fonerror;} this.sendquery = function (/ * queryable 함수 이름, 1을 전달하는 인수, 2, 2, 2 등을 전달하는 인수 */) {if (arguments.length <1) { 새로운 typerror (queryable worker.sendquery -returnes); = function (vmsg) {// 콜을 사용할 필요가 없다고 생각합니다. prototy worker.protopty.postmessage.call (Oworker, vmsg); ] = flistener;}; ] * /); // 귀하의 사용자 정의 청취자 Omytask.addListener (printsometh ing, function (nresult) {document.getElementById (FirstLink) .parentNode.appendChild (document.creatextNode (디스플레이는 + nresult +!);});}); ); omytask.addlistener (alertsomething, function, sunit) {alert ( + + + :-));}); ID = FirstLink href = javaScript : omytask.sendQuery ( 'getDifferente', 5, 3);> 5와 3의 차이점은 무엇입니까? Omytask.sendQuery ( 'Waitsomething'); ) {// something} funct} funct ion MyPrivateFunc2 () {// Something} // 등. 차이를 얻을 수있는 두 가지 nightrs : getDifference : function (nminund, nsubtrahend) {reply (printsomething, nminuend -nsubtrahend);}, // example #2 : 3 초 대기 대기 : function () {settimeout (function () {alererererer tsomething, 3, sex);}, 3000);}; (/ * 청취자 이름, 1을 통과하는 인수, 2 등의 인수 등 */) {if (arguments.length <1) {Throw New Typerror (답장 -enugh 인수); : Arguments [0], RNB93QH : Array.Prototype.slice .Call (Arguments, 1)});} onMessage = OnTMessage = function (oevent) {if (eevent.data instanceof 객체 && sownproperty) && daeenproprty (bk4e1h0) .hasownproperty (Ktp3fm1)). {QueryableFunction [eevent.data .BK4E1H0] .Apply (self, oevent.data.ktp3fm1);} else {defaultQuery (eevent.data);}};이것은 홈페이지-일꾼 또는 반대의 반대 사이에 뉴스를 전환하는 매우 적합한 방법입니다.
소유권을 전송하여 데이터 전송 (양도 가능한 개체)
Google Chrome 17 및 Firefox 18에는 특정 유형의 객체 (전송 가능한 객체)를 작업자/근로자로 전달하는 더 높은 성능을 가진 다른 방법이 포함되어 있습니다. 전송 오브젝트는 사본 작동없이 한 컨텍스트에서 다른 컨텍스트로 전송됩니다. 이것은 빅 데이터를 통과 할 때 성능이 크게 향상 될 것임을 의미합니다. C/C ++ 세계에서 온 경우 참조에 따라 전송으로 상상해보십시오. 그러나 참조에 따른 운송과 달리 객체가 전송되면 원래 컨텍스트가 더 이상 존재하지 않는 버전. 객체의 소유권은 새로운 컨텍스트로 전송됩니다. 예를 들어, 기본 응용 프로그램에서 ArrayBuffer 객체를 작업자로 전송하면 원래 ArrayBuffer가 지워지고 사용할 수 없습니다. 포함 된 콘텐츠 (완료)는 작업자 컨텍스트로 전달됩니다.
// 32MB 파일을 작성하고 채우십시오 .Var UINT8ARRAY = NEW UINT8ARAY (1024*1024*32); ;하위 작업자를 생성하십시오
필요한 경우 근로자는 더 많은 근로자를 창출 할 수 있습니다. 이것을 하위 작업자라고하며, 부모 페이지와 동일한 소스에서 호스팅해야합니다. 같은 방식으로, 하위 작업자는 자신의 페이지 대신 자신의 페이지 대신 URI의 주소를 분석합니다. 이로 인해 작업자는 자신의 의존성을 쉽게 모니터링하게합니다. Chrome은 하위 작업자를 지원하지 않습니다.
임베디드 작업자현재 <cript> 요소와 같은 웹 페이지에 작업자 코드를 포함시킬 수있는 "공식"메소드가 없습니다. 그러나 <script> 요소에 SRC 특성이없고 유형 특성이 실행중인 MIME 유형으로 지정되지 않으면 데이터 블록 요소로 간주되며 JavaScript에서 사용할 수 있습니다. "데이터 블록"은 HTML5에서 매우 일반적인 기능으로 거의 모든 유형의 텍스트 유형 데이터를 전달할 수 있습니다. 따라서 다음과 같은 방식으로 작업자를 포함시킬 수 있습니다.
<! 마임 유형은 텍스트/JS-Worker이기 때문에 엔진 분석. var myvar = Hello World!; </script> <script type = text/javaScript> // 스크립트는 MIME 유형이 텍스트/JavaScript이기 때문에 JS 엔진에서 분석됩니다. 함수 pageLog (smsg) {// 조각 사용 : 이런 방식으로 브라우저는 렌더링/양육 만됩니다. var.createdocumentFragment (); -workr> //이 스크립트는 MIME 유형이 텍스트/JS- 작업자이기 때문에 JS 엔진에 의해 구문 분석되지 않습니다. OnMessage = function (oevent) {postMessage (myvar);}; </script> <script type = text/javaScript> // 스크립트는 MIME 유형이 텍스트/JavaScript이기 때문에 JS 엔진에서 분석됩니다. // 과거에 ... : // 우리는 Blob Builder //을 사용합니다. 그러나 이제 우리는 Blob을 사용합니다 ... : var blob = new Blob (Array.prototype.map.call (documens.quelySelectorary (script [type =/text // js- workr/], function (oscript) {return oscript.textContent;}), {type : text/javaScript}); S- 작업자 스크립트. worker = window.url.createobjecturl (blob)); () {document.worker.postmessage ();};이제 임베디드 작업자가 맞춤형 문서로 설정되었습니다.
시간 초과 및 간격작업자는 메인 스레드처럼 시간 초과 및 간격을 사용할 수 있습니다. 예를 들어, 중단되지 않은 실행 코드없이 작업자 스레드가 주기적으로 주기적으로 원한다면 매우 유용합니다.
해지 작업자즉시 작업자를 종료하려면 종료 () 작업자 메소드를 호출 할 수 있습니다 ::
myworker.terminate ();
작업자 스레드는 즉시 살해되며 자체 운영 또는 정리 작업을 완료 할 수있는 기회를 남기지 않을 것입니다.
근로자는 자신의 nsiworkerscope.close () 메소드를 호출하여 자신을 닫을 수 있습니다.
self.close ();프로세스 오류
작업자가 런타임 오류 인 경우 OnError 이벤트 처리 기능이 호출됩니다. Erroreven 인터페이스 이름 오류를 구현하는 이벤트를 수신합니다. 사고는 기본 조치를 방지하기 위해 취소 될 수 있습니다. 오류 이벤트에는 다음과 같은 세 개의 필드가 있습니다.
메시지읽기 쉬운 오류 메시지.
파일 이름오류 스크립트 파일 이름.
리네 노오류가 발생하면 스크립트 파일의 줄 번호입니다.
Navigator Object를 방문하십시오작업자는 범위로 네비게이터 객체에 액세스 할 수 있습니다. 일반 스크립트에서 수행하는 것처럼 브라우저를 인식 할 수있는 다음 문자열이 포함되어 있습니다.
작업자 스레드는 글로벌 함수 인 importscripts ()에 액세스 할 수있어 작업자가 스크립트 또는 라이브러리를 자체 범위로 소개 할 수 있습니다. 매개 변수를 전달하지 않고 URI를 소개하거나 여러 스크립트의 URI를 소개 할 수 있습니다.
importscripts (); */
브라우저가 스크립트를로드하고 실행합니다. 각 스크립트의 전역 객체는 작업자가 사용할 수 있습니다. 스크립트를로드 할 수 없으면 Network_error 예외가 발생하고 다음 코드는 실행되지 않습니다. 이전에 실행 된 코드 (Window.settimeout ()를 사용하여 실행 된 코드 포함)를 여전히 사용할 수 있습니다. importScripts () 이후의 함수 선언은 항상 다른 코드보다 먼저 실행되기 때문에 사용할 수 있습니다. 참고 : 스크립트의 다운로드 순서는 고정되지 않았지만 주문은 실행되면 importScripts () ()로 전달됩니다. 이것은 모든 스크립트가 다운로드되고 실행될 때까지 동시에 완료되며, ImportScripts ()가 반환됩니다.
예이 섹션에서는 DOM Worker를 사용하는 방법에 대한 몇 가지 예를 제공합니다.
백그라운드에서 작업을 실행합니다
작업자의 장점 중 하나는 UI 스레드를 차단하지 않고 프로세서의 조밀 한 작동을 실행할 수 있다는 것입니다. 다음 예에서는 작업자가 피보나를 계산하는 데 사용됩니다.
자바 스크립트 코드
다음 JavaScript 코드는 다음 섹션의 HTML 파일과 관련된 "fibonacci.js"파일에 저장됩니다.
var results = []; 함수 resultreceiver (event) {results.push (parseint (event.data)) {postmessage (results [0] + resu lts [1]);}}; 함수 ErrowReceiver (이벤트) {throw event.data;} onmessage = function (var n = parseint) (n == 0 || n == 1); } for (var i = 1; i <= 2; i ++) {var worker (fibonacci.js);작업자는 onMessage를 함수로 설정합니다. (이 사용은 동일한 이름의 글로벌 변수를 정의하거나 동일한 이름의 함수를 정의하는 것과 동일하지 않습니다. var onMessage and Function OnMessage는 동일한 글로벌 속성을 이름과 정의하지만 기능을 등록하지는 않습니다. 웹 페이지에서 보낸 메시지.) 이렇게하면 재귀가 가능하고 새 사본이 생성되어 각 계산주기를 처리합니다.
HTML 코드
<doctype html> <html> <gead> <meta charset = utf-8/> <테스트 스레드 fibonacci </title> </head> <body> <div id = result> <script language e = javaScript> var Worker = 신규 작업자 (fibonacci.js) = orrow) {worker error.message +/n);};웹 페이지는 div 요소를 생성하고, ID는 결과입니다.이를 사용하여 계산 결과를 표시 한 다음 작업자를 생성합니다. 작업자를 생성 한 후 OnMessage 처리 기능은 DIV 요소의 내용을 설정하여 계산 결과를 표시하도록 구성된 다음 OnError 처리 기능이 저장 오류 정보로 설정됩니다. 마지막으로 작업자에게 메시지를 보내서 시작하십시오.