HTML 웹 작업자 API

2023. 1. 4. 10:51

Web Workers(웹 작업자)란?

페이지 성능에 영향을 주지 않고 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript입니다

HTML 페이지에서 스크립트를 실행하면 스크립트가 완료될 때까지 페이지가 응답하지 않습니다.

웹 작업자가 백그라운드에서 실행되는 동안 클릭, 항목 선택 등 원하는 모든 작업을 계속할 수 있습니다.

웹 작업자의 간단한 예시이다.

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

예시 설명

웹 작업자 "demo_workers.js" 파일

이러한 js파일이 웹 작업자 파일이라 생각하면 된다.

postMessage() : HTML 페이지에 다시 메시지를 게시하는 데 사용되는 메서드

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

web worker의 "onmessage" 이벤트

웹 작업자로부터 메시지를 보내고 받을 수 있습니다.

w.terminate();

웹 작업자를 종료하고 브라우저/컴퓨터 리소스를 확보

웹 작업자 재사용

작업자 변수를 정의되지 않은 것으로 설정하면 종료된 후 코드를 재사용할 수 있다.

w = undefined;

웹 작업자는 외부 파일에 있으므로

다음 JavaScript 객체에 액세스할 수 없습니다.

The window object
The document object
The parent object

'Web > HTML' 카테고리의 다른 글

HTML SSE API (0)	2023.01.04
HTML 웹 저장소 API (0)	2023.01.04
HTML 드래그 앤 드롭 API (0)	2023.01.04
HTML 위치 정보 API (0)	2023.01.03
HTML 플러그인 (0)	2023.01.03

doornuddle