HTML5의 새로운 기능 Web Worker
- 黄舟원래의
- 2017-03-30 11:54:061344검색
1. 개요
JavaScript언어는 단일 스레드를 사용합니다. 모델, 즉 모든 작업이 큐에 배열되어 있으며, 한 번에 한 가지 작업만 수행할 수 있다는 것은 컴퓨터의 컴퓨팅 성능이 향상됨에 따라 큰 불편을 초래합니다. . JavaScript의 잠재력을 완전히 활용할 수는 없습니다. 파일 API를 사용하면 JavaScript가 로컬 파일을 읽을 수 있다는 점을 고려하면 더욱 그렇습니다. 메인 스레드가 실행되는 동안 하위 스레드는 백그라운드에서 실행되며 하위 스레드가 계산 작업을 완료한 다음 반환할 때까지 두 스레드는 서로 간섭하지 않습니다. 따라서 각 하위 스레드는 작업을 자동으로 완료하는 "작업자"와 같습니다.
웹 작업자는 다음과 같은 특징을 갖습니다.
<. class=" list-paddingleft-2">스크립트 제한: 하위 스레드는 웹 페이지의 전역 페이지를 읽을 수 없습니다. 변수와 함수는 경고 및 확인 메서드를 실행할 수 없지만 setInterval 및 setTimeout을 실행할 수 있으며 XMLHttpRequest 개체를 사용하여 AJAX 요청을 할 수 있습니다. >
파일 제한: 하위 스레드는 로컬 파일을 읽을 수 없습니다. 즉, 하위 스레드는 로컬 파일 시스템(file://)을 열 수 없으며 로드하는 스크립트는 네트워크에서 가져와야 합니다.
사용하기 전에 브라우저가 이 API를 지원하는지 확인하세요. 지원되는 브라우저에는 IE 10+, Firefox 3.6+, Safari 4.0+, Chrome 및 Opera 11이 포함되지만 모바일 브라우저는 아직 지원되지 않습니다. 지원
if (window.Worker) { // 支持} else { // 不支持}기본 스레드 내에서
new명령을 사용하여 Worker 메서드를 호출하여 새 하위 스레드를 생성합니다.
var worker = new Worker('work.js');
Worker 메소드의 매개변수는 스크립트 파일이며, 이 파일은 하위 스레드가 완료할 작업입니다. 위 코드는 자식 스레드가 로컬 파일 시스템을 읽을 수 없기 때문입니다. , 스크립트 파일은 네트워크에서 가져와야 합니다. 404 오류와 같이 다운로드에 실패하면 하위 스레드가 자동으로 실패합니다. 하위 스레드는 생성된 후 시작되지 않습니다. 메인 스레드가 postMessage 메서드를 호출할 때까지 기다려야 합니다. 즉, 신호가 전송될 때까지 시작되지 않습니다.
worker.postMessage('hello world');
postMessage 메소드의 매개변수는 메인 스레드에서 하위 스레드로 전달되는 신호입니다.
문자열또는 객체일 수 있습니다.
worker.postMessage({method: 'each', args: ['work']});3. 서브 스레드의 이벤트모니터링
서브 스레드에는 메시지 이벤트를 수신하기 위한 콜백 함수가 있어야 합니다. .
//File: work.jsself.addEventListener('message', function(e) {
self.postMessage('You said: ' + e.data);
}, false);self는 하위 스레드 자체를 나타내고 self.addEventListener는 하위 스레드의 메시지 이벤트에 대해 지정된 콜백 함수를 나타냅니다. (onmessage 속성 ). 콜백 함수의
매개변수는 이벤트 객체이며 해당 데이터 속성에는 메인 스레드에서 보낸 신호가 포함되어 있습니다. self.postMessage는 하위 스레드가 기본 스레드에 신호를 보내는 것을 의미합니다.메인 스레드가 보내는 다양한 신호 값에 따라 하위 스레드는 다양한 메서드를 호출할 수 있습니다.
'message', method = args = reply =);4. 메인 스레드의 이벤트 모니터링 메인 스레드는 하위 스레드에서 보낸 신호를 수신하기 위해 메시지 이벤트에 대한 콜백 함수도 지정해야 합니다.
// File: main.jsworker.addEventListener('message', function(e) {
console.log(e.data);
}, false);5. 오류 처리
메인 스레드는 하위 스레드에서 오류가 발생하는지 모니터링할 수 있습니다. 오류가 발생하면 메인 스레드의 오류 이벤트가 트리거됩니다.worker.onerror(function(e) {
console.log(e);
});// orworker.addEventListener('error', function(e) {
console.log(e);
}, false);6. 하위 스레드 닫기
사용 후 시스템 리소스를 절약하려면 메인 스레드에서 종료 메소드를 호출하여 하위 스레드를 수동으로 닫아야 합니다. worker.terminate();는 하위 스레드에서 내부적으로 닫힐 수도 있습니다.
self.close();
7. 메인 스레드와 하위 스레드 간의 데이터 통신 메인 스레드와 하위 스레드 간의 통신 내용은 텍스트일 수도 있고 객체일 수도 있습니다. 이 통신은 복사 관계입니다. 즉, 는 주소 대신
값을 전달하므로 하위 스레드에 의한 통신 내용 수정은 메인 스레드에 영향을 주지 않습니다. 실제로 브라우저의 내부 작동 메커니즘은 먼저 통신 내용을 직렬화한 다음 직렬화된 문자열을 하위 스레드로 전송하고 하위 스레드가 이를 복원하는 것입니다. 메인 스레드와 하위 스레드는 파일, Blob,배열버퍼 및 기타 개체와 같은 바이너리 데이터를 교환할 수도 있으며 스레드 간에도 전송할 수 있습니다.
但是，用拷贝方式发送二进制数据，会造成性能问题。比如，主线程向子线程发送一个500MB文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。
如果要使用该方法，postMessage方法的最后一个参数必须是一个数组，用来指定前面发送的哪些值可以被转移给子线程。
worker.postMessage(arrayBuffer, [arrayBuffer]);
8、同页面的Web Worker
通常情况下，子线程载入的是一个单独的JavaScript文件，但是也可以载入与主线程在同一个网页的代码。假设网页代码如下：
<!DOCTYPE html>
<body>
<script id="worker" type="app/worker">
addEventListener('message', function() {
postMessage('Im reading Tech.pro');
}, false); </script>
</body></html>我们可以读取页面的script，用worker来处理。
var blob = new Blob([document.querySelector('#workere').textContent]);
这里需要把代码当作二进制数据读取，所以使用Blob接口。然后，这个二进制对象转为URL，再通过这个URL创建worker。
var url = window.URL.createObjectURL(blob);var worker = new Worker(url);
部署事件监听代码。
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);最后启动worker。
worker.postMessage('');
整个页面的代码如下：
<script>
(function() {
var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);
worker.postMessage(&#39;&#39;);
})(); </script>