HTML5 전에 JavaScript는 브라우저에서 실행됩니다. 다중 스레드 시뮬레이션 (예 : SetInterval 메소드, Settimeout 메소드 등과 같은 JavaScript)을 구현하는 방법에는 여러 가지가 있었지만 본질적으로 프로그램 실행은 여전히 JavaScript 엔진에 의해 단일 스레드 방식으로 수행됩니다. HTML5에 도입 된 작업자 스레드를 사용하면 브라우저 측 JavaScript 엔진이 JavaScript 코드를 동시에 실행하여 브라우저 측간 다중 스레드 프로그래밍을 잘 지원할 수 있습니다.
JavaScript의 멀티 스레딩 - 웹 워크커 HTML5의 웹 작업자는 두 개의 다른 스레드 유형으로 나눌 수 있으며, 하나는 전용 스레드 전용 작업자이고 다른 하나는 공유 스레드 공유 작업자입니다. 두 가지 유형의 스레드는 다른 용도를 가지고 있습니다. 특별 웹 작업자전담 작업자는 스크립트를 만든 스크립트에 연결되어 있습니다. 다른 작업자 또는 브라우저 구성 요소와 통신 할 수 있지만 DOM과 통신 할 수는 없습니다. 전용의 의미는이 스레드가 한 번에 하나의 요구 사항 만 처리한다는 것입니다. 전용 스레드는 IE를 제외한 다양한 주류 브라우저에서 구현되며 자신있게 사용할 수 있습니다.
스레드를 만듭니다작업자 생성은 간단합니다. 스레드에서 실행 해야하는 JavaScript 파일의 파일 이름을 생성자로 전달하십시오.
스레드 통신기본 스레드와 하위 스레드 사이의 통신은 스레드 오브젝트의 사후 관리 및 onmessage 메소드를 사용합니다. 누가 데이터를 보내든지, 보내기 및 전송은 postMessage 메소드를 사용하고 수신기는 onMessage 메소드를 사용하여 데이터를 수신합니다. PostMessage에는 하나의 매개 변수, 즉 전달 된 데이터가 있고 OnMessage는 하나의 매개 변수 만 있습니다. 이벤트라고 가정하면, 수신 된 데이터는 event.data를 통해 얻습니다.
JSON 데이터를 보냅니다JSON은 JS가 기본적으로 지원하는 것입니다. 아무것도 사용할 필요가 없습니다. JSON에서 복잡한 데이터 만 사용하십시오. 예를 들어:
postMessage ({ 'cmd': 'init', 'timestamp': date.now ()});
처리 오류스레드에서 오류가 발생하면 onerror 이벤트 콜백이 호출됩니다. 따라서 오류를 처리하는 방법은 매우 간단합니다. 이는 스레드 인스턴스의 onerror 이벤트를 장착하는 것입니다. 이 콜백 함수는 매개 변수 오류가 있으며, 여기에는 3 개의 필드가 있습니다 : 메시지 - 오류 메시지; 파일 이름 - 오류가 발생한 스크립트 파일; Lineno- 오류가 발생한 줄.
실을 파괴하십시오스레드 내부에서 가까운 방법을 사용하여 스스로를 파괴하십시오. 스레드 외부의 메인 스레드에서 스레드 인스턴스의 종단 메소드는 스레드를 파괴하는 데 사용됩니다.
다음은 스레드의 기본 작동을 보는 예입니다.
HTML 코드 :
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 웹 작업자 Fibonacci </title>
<script type = "text/javaScript">
onload = function () {
var 노동자 = 신규 노동자 ( 'fibonacci.js');
worker.onmessage = function (이벤트) {
Console.log ( "결과 :" + event.data);
};
worker.onerror = 함수 (오류) {
console.log ( "오류 :" + error.message);
};
Worker.postmessage (40);
}
</스크립트>
</head>
<body>
</body>
</html>
스크립트 파일 fibonacci.js 코드 :
//fibonacci.js
var fibonacci = function (n) {
N <2? n : arguments.callee (n -1) + arguments.callee (n -2);
};
onmessage = function (이벤트) {
var n = parseint (event.data, 10);
postmessage (fibonacci (n));
};
동일한 디렉토리에 넣고 페이지 파일을 실행 한 다음 콘솔을보고 실행 결과를 확인하십시오.
여기에 또 다른 요점이 있습니다. 메인 스레드에서는 OnMessage 이벤트가 다른 방식으로 연결될 수 있습니다.
worker.addeventListener ( 'message', function (event) {
Console.log ( "결과 :" + event.data);
}, 거짓);
나는 개인적으로 그것이 매우 번거 롭다고 생각하므로 OnMessage를 직접 사용하지 않겠습니까?
다른 스크립트 파일을 사용하십시오작업자는 Global Method ImportScripts를 사용하여 다른 인 도메인 스크립트 파일 또는 클래스 라이브러리를로드하고 사용할 수 있습니다. 예를 들어 다음은 법적 사용 방법입니다.
importScripts ();/ * imports 아무것도 */
importScripts ( 'foo.js'); / * "foo.js"만 가져옵니다 */
importScripts ( 'foo.js', 'bar.js');/ * 두 스크립트 가져 오기 */
가져 오면이 파일의 메소드를 직접 사용할 수 있습니다. 온라인으로 작은 예를 참조하십시오.
/**
* ImportScripts 메소드를 사용하여 외부 리소스 스크립트를 소개하십시오. 여기서 수학 공식 계산 도구 라이브러리 Math_utilities.js를 사용합니다.
* JavaScript 엔진 이이 리소스 파일을로드하면 다음 코드를 계속 실행하십시오. 동시에 다음 코드에 액세스하고
* 리소스 파일에 정의 된 변수 및 메소드.
**/
importScripts ( 'math_utilities.js');
onmessage = function (이벤트)
{
var first = event.data.first;
var second = event.data.second;
계산 (첫 번째, 두 번째);
};
함수 계산 (첫 번째, 두 번째) {
// 계산 작업을 수행합니다
var common_divisor = divisor (첫 번째, 두 번째);
var common_multiple = 다중 (첫 번째, 두 번째);
postmessage ( "작업 완료!" +
"가장 일반적인 배수는" + common_divisor +입니다
"그리고 가장 큰 일반적인 분배기는"+common_multiple);
}
인터넷의 일부 네티즌은 또한 여기에서 Importscripts 방법을 사용하여 리소스 사전 로딩 문제를 해결하는 것을 생각했으며 (브라우저는 리소스를 구문 분석하고 실행하지 않고 리소스를 예압합니다) 그 이유는 매우 간단합니다.
스레드 중첩작업자 스레드에서는 자식 스레드를 만들 수 있으며 다양한 작업이 동일합니다.
동기화 문제작업자는 잠금 메커니즘이 없으며 멀티 스레드 동기화 문제는 코드 (예 : 신호 변수 정의)에 의해서만 해결 될 수 있습니다.
SharedWebworker 공유 웹 작업자는 주로 여러 연결 동시성 문제에 적합합니다. 여러 연결을 처리해야하므로 API는 전용 근로자와 약간 다릅니다. 이 외에도 전용 근로자와 같은 공유 웹 워커는 DOM에 액세스 할 수 없으며 양식 속성에 대한 액세스도 제한됩니다. 공유 웹 작업자는 커뮤니케이션을 교차 할 수 없습니다.Page Scripts는 공유 웹 워커와 통신 할 수 있지만, 전용 웹 워커와 약간 다르면 (암시 적 포트 커뮤니케이션 사용) 포트 개체를 사용하고 메시지 이벤트 핸들러를 첨부하여 통신이 명시 적으로 수행된다는 것입니다.
웹 워커 스크립트에서 첫 번째 메시지를 수신 한 후 공유 웹 작업자는 이벤트 핸들러를 활성화 된 포트에 첨부합니다. 일반적으로 핸들러는 메시지를 호출 코드로 반환하기 위해 자체 postMessage () 메소드를 실행 한 다음 포트의 start () 메소드는 유효한 메시지 프로세스를 생성합니다.
인터넷에서 찾을 수있는 유일한 예를 살펴보십시오. 다른 연결에서 전송 된 지침을 수신 할 공유 스레드를 작성한 다음 자체 명령 처리 로직을 구현하십시오. 명령 처리가 완료되면 결과는 각각의 다른 연결된 사용자에게 반환됩니다.
HTML 코드 :
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 공유 작업자 예 : HTML5에서 공유 작업자 사용 방법 </title>
<cript>
var 노동자 = 신규 공유 작업자 ( 'sharedworker.js');
var log = document.getElementById ( 'response_from_worker');
worker.port.addeventListener ( 'message', function (e) {
// 웹 페이지에 응답 데이터를 기록합니다
log.textContent = e.Data;
}, 거짓);
worker.port.start ();
worker.port.postmessage ( '사용자 웹 페이지에서 핑 ..');
// 다음 메소드는 사용자 입력을 공유 작업자에게 보냅니다
함수 postmessageTosharedworker (입력)
{
// JSON 개체를 정의하여 요청을 구성합니다
var 명령 = {명령 : input.value};
Worker.port.postmessage (지침);
}
</스크립트>
</head>
<바디 onload = ''>
<output id = 'response_from_worker'>
공유 근로자 예 : HTML5에서 공유 작업자를 사용하는 방법
</output>
공유 근로자에게 지침을 보내십시오.
<입력 유형 = "text"autofocus oninput = "postMessAgeTosharedWorker (this); return false;">
</입력>
</body>
</html>
스크립트 파일 코드 :
// 다른 연결에서 전송 된 지침을 수신 할 공유 스레드를 만듭니다. 명령 처리가 완료되면 결과는 각각의 다른 연결된 사용자에게 반환됩니다.
var connect_number = 0;
onconnect = function (e) {
Connect_Number = Connect_Number+ 1;
// 여기에서 첫 번째 포트를 얻습니다
var port = e.ports [0];
port.postmessage ( '새 연결! 현재 연결 번호는'입니다.
+ connect_number);
port.onmessage = function (e) {
// 요청자로부터 지침을받습니다
var 명령 = e.data.instruction;
var results = execute_instruction (명령어);
port.postmessage ( 'request :'+습기+'응답'+결과
+'공유 근로자로부터 ...');
};
};
/*
*이 기능은 요청자에게 보내는 지침을 실행하는 데 사용됩니다.
* @param 명령
* @반품
*/
함수 execute_instruction (명령어)
{
var result_value;
// 여기에서 논리를 구현하십시오
// 명령 실행 ...
return result_value;
}
위의 공유 스레드 예제에서 공유 스레드 객체는 메인 페이지, 즉 각 사용자 연결 페이지에 구성되며 수신 사용자 명령을 공유 스레드로 보낼 수있는 메소드가 정의됩니다. 동시에 Connect_Number는 공유 스레드의 구현 코드 스 니펫에 정의되어 공유 스레드에 연결된 총 수를 기록합니다. 그런 다음 OnConnect 이벤트 프로세서를 사용하여 다른 사용자의 연결을 수락하고 통과하는 지침을 구문 분석하십시오. 마지막으로, 메소드 execute_instruction은 사용자의 지침을 실행하도록 정의됩니다. 명령 실행이 완료되면 결과가 각 사용자에게 반환됩니다.
여기서는 이전 예제와 같이 작업자 스레드의 OnMessage 이벤트 핸들러를 사용하지 않았지만 AddeventListener에 다른 방법을 사용했습니다. 실제로, 앞에서 언급했듯이,이 두 가지의 구현 원칙은 기본적으로 동일하지만 여기에는 약간의 차이가 있습니다. addeventListener를 사용하여 공유 스레드에서 메시지를 수락하는 경우 먼저 Worker.port.start () 메서드를 사용 하여이 포트를 시작해야합니다. 그런 다음 작업자 스레드가 사용되는 방식과 마찬가지로 일반적으로 메시지를 받고 보낼 수 있습니다.
최종 진술 스레드에서 할 수있는 일 :1. settimeout (), cleartimeout (), setinterval (), clearinterval () 및 기타 함수를 사용할 수 있습니다.
2. 네비게이터 객체를 사용할 수 있습니다.
3. xmlhttprequest를 사용하여 요청을 보낼 수 있습니다.
4. 스레드에서 웹 스토리지를 사용할 수 있습니다.
5. 스스로를 사용하여 스레드 에서이 스레드의 범위를 얻을 수 있습니다.
스레드에서 할 수없는 것 :1. Navigator 이외의 DOM/BOM 객체는 Window 및 Document와 같은 스레드에서 사용할 수 없습니다 (작동하려는 경우 작업자 제작자에게 메시지를 보내고 콜백 함수를 통해 작동 할 수 있음).
2. 주 스레드의 변수와 함수는 스레드에서 사용할 수 없습니다.
3. 일시 중단 효과가있는 작동 명령은 경고 등과 같은 스레드에서 사용할 수 없습니다.
4. JS는 스레드의 도메인에 걸쳐로드 할 수 없습니다.
스레드는 또한 자원 소비가 필요하며 스레드를 사용하면 약간의 복잡성을 가져 오므로 추가 스레드를 사용해야 할 충분한 이유가 없으면 사용하지 마십시오.
실제 참조공식 문서 : http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
웹 워커 분류 설명 : http://www.w3schools.com/html5/html5_webworkers.asp
템플릿 걱정 : http://www.cuoxin.com/w3school/html5/
웹 워커 개요 : https://developer.mozilla.org/en/using_web_workers