HTML5-웹 작업자
JavaScript는 단일 스레드 환경에서 실행되도록 설계되었으므로 여러 스크립트를 동시에 실행할 수 없습니다. UI 이벤트를 처리하고, 많은 양의 API 데이터를 쿼리 및 처리하고, DOM을 조작해야하는 상황을 고려하십시오.
CPU 사용률이 높은 상황에서는 JavaScript가 브라우저를 중단합니다. JavaScript가 큰 루프를 통과하는 간단한 예를 들어 보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop() {
for (var i = 0; i <= 10000; i += 1) {
var j = i;
}
alert("Completed " + j + "iterations" );
}
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "bigLoop();" value = "Big Loop" />
<input type = "button" onclick = "sayHello();" value = "Say Hello" />
</body>
</html>다음 결과가 생성됩니다-
Big Loop 버튼을 클릭하면 Firefox에 다음과 같은 결과가 표시됩니다-
Web Workers 란 무엇입니까?
위에서 설명한 상황은 다음을 사용하여 처리 할 수 있습니다. Web Workers 사용자 인터페이스를 중단하지 않고 계산 비용이 많이 드는 모든 작업을 수행하며 일반적으로 별도의 스레드에서 실행됩니다.
웹 워커는 클릭 또는 기타 사용자 상호 작용에 응답하는 스크립트에 의해 중단되지 않는 장기 실행 스크립트를 허용하고 페이지 응답을 유지하지 않고도 긴 작업을 실행할 수 있습니다.
웹 워커는 백그라운드 스크립트이며 비교적 무겁고 많은 수로 사용하기위한 것이 아닙니다. 예를 들어, 4 메가 픽셀 이미지의 각 픽셀에 대해 하나의 작업자를 시작하는 것은 부적절합니다.
스크립트가 Web Worker 내에서 실행 중이면 웹 페이지의 창 개체 (window.document)에 액세스 할 수 없습니다. 즉, Web Worker가 웹 페이지 및 DOM API에 직접 액세스 할 수 없습니다. Web Workers는 브라우저 UI를 차단할 수 없지만 여전히 CPU주기를 소비하고 시스템의 응답 성을 떨어 뜨릴 수 있습니다.
웹 작업자는 어떻게 작동합니까?
웹 작업자는 작업자가 실행할 코드가 포함 된 JavaScript 파일의 URL로 초기화됩니다. 이 코드는 이벤트 리스너를 설정하고 메인 페이지에서 생성 한 스크립트와 통신합니다. 다음은 간단한 구문입니다-
var worker = new Worker('bigLoop.js');지정된 자바 스크립트 파일이있는 경우 브라우저는 비동기 적으로 다운로드되는 새 작업자 스레드를 생성합니다. 작업자 경로가 404 오류를 반환하면 작업자가 자동으로 실패합니다.
애플리케이션에 지원되는 JavaScript 파일이 여러 개있는 경우 가져올 수 있습니다. importScripts() 다음과 같이 쉼표로 구분 된 인수로 파일 이름을 취하는 방법-
importScripts("helper.js", "anotherHelper.js");웹 워커가 생성되면 웹 워커와 상위 페이지 간의 통신은 postMessage()방법. 브라우저 / 버전에 따라 postMessage ()는 문자열 또는 JSON 객체를 단일 인수로 받아 들일 수 있습니다.
Web Worker가 전달한 메시지는 onmessage메인 페이지에서 이벤트. 이제 Web Worker를 사용하여 bigLoop 예제를 작성해 보겠습니다. 다음은 웹 워커를 생성하여 루프를 실행하고 변수의 최종 값을 반환하는 메인 페이지 (hello.htm)입니다.j −
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>다음은 bigLoop.js 파일의 내용입니다. 이것은 사용합니다postMessage() 통신을 메인 페이지로 다시 전달하는 API-
for (var i = 0; i <= 1000000000; i += 1) {
var j = i;
}
postMessage(j);이것은 다음 결과를 생성합니다-
웹 워커 중지
웹 워커는 스스로 멈추지 않지만 자신을 시작한 페이지는 다음을 호출하여 중지 할 수 있습니다. terminate() 방법.
worker.terminate();종료 된 웹 작업자는 더 이상 메시지에 응답하거나 추가 계산을 수행하지 않습니다. 작업자를 다시 시작할 수 없습니다. 대신 동일한 URL을 사용하여 새 작업자를 만들 수 있습니다.
오류 처리
다음은 콘솔에 오류를 기록하는 Web Worker JavaScript 파일의 오류 처리 함수의 예입니다. 오류 처리 코드를 사용하면 위의 예는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
worker.onerror = function (event) {
console.log(event.message, event);
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>브라우저 지원 확인
다음은 브라우저에서 사용 가능한 웹 작업자 기능 지원을 감지하는 구문입니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script src = "/js/modernizr-1.5.min.js"></script>
<script>
function myFunction() {
if (Modernizr.webworkers) {
alert("Congratulation!! you have web workers support." );
} else {
alert("Sorry!! you do not have web workers support." );
}
}
</script>
</head>
<body>
<button onclick = "myFunction()">Click me</button>
</body>
</html>이것은 다음 결과를 생성합니다-