웹 작업자는 페이지 성능에 영향을 주지 않고 백그라운드에서 실행되는 JavaScript 이다.
웹워커란 무엇인가?(HTML Web Worker)
HTML 페이지에서 스크립트를 실행하면 스크립트가 완료될 때까지 페이지가 응답하지 않는다.
웹 작업자는 페이지 성능에 영향을 주지 않고 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript 이다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 항목 선택 등 원하는 모든 작업을 계속할 수 있다.
HTML 웹워커 예제
아래 예제에서는 백그라운드에서 숫자를 셀 수 있는 간단한 웹 작업자를 만든다:
| <!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">HTML 웹워커 시작</button> <button onclick="stopWorker()">HTML 웹워커 중지</button> <p><strong>Note:</strong> Internet Explorer 9 및 이전 버전에서는 웹 작업자를 지원하지 않습니다.</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> |
아래 그림은 위 코드 실행 화면이다.
웹워커 지원 확인
웹 작업자를 작성하기 전에 사용자의 브라우저가 웹 작업자를 지원하는지 확인한다:
| if (typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } |
웹워커 파일 생성
이제 외부 자바스크립트로 웹워커를 만들어 보겠다.
여기서는 중요한 스크립트를 만든다. 스크립트는 "demo_workers.js" 파일에 저장된다:
| var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); |
위 코드의 중요한 부분은 HTML 페이지에 메시지를 다시 게시하는 데 사용되는 postMessage() 메서드이다.
참고: 일반적으로 웹 작업자는 이러한 간단한 스크립트에 사용되지 않지만 CPU를 많이 사용하는 작업에 사용된다.
웹워커 오브젝트 생성
이제 웹워커 파일이 생겼으니 HTML 페이지에서 호출해야 한다.
다음 행은 작업자가 이미 존재하는지 여부를 확인한다. 그렇지 않으면 새 웹 작업자 개체를 만들고 "demo_workers.js"에서 코드를 실행한다:
| if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } |
그러면 우리는 웹 워커와 메시지를 주고받을 수 있다.
웹 작업자에 "메시지" 이벤트 수신기를 추가한다.
| w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; }; |
웹 작업자가 메시지를 게시하면 이벤트 수신기 내의 코드가 실행된다. 웹 작업자의 데이터는 event.data에 저장된다.
웹워커 종료
웹 작업자 개체가 만들어지면 외부 스크립트가 완료된 후에도 종료될 때까지 메시지를 계속 수신한다.
웹 작업자를 종료하고 브라우저/컴퓨터 리소스를 확보하려면 terminate() 메서드를 사용한다:
| w.terminate(); |
웹워커 재사용
작업자 변수를 정의되지 않음으로 설정하면 종료된 후 다음 코드를 다시 사용할 수 있다:
| w = undefined; |
웹워커와 DOM
웹 작업자는 외부 파일에 있으므로 다음 JavaScript 개체에 액세스할 수 없다:
- window object
- document object
- parent object
이상과 같이 HTML 웹워커 API관련해서 살펴보았다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML SSE API (0) | 2023.06.27 |
|---|---|
| HTML 웹 스토리지 API(HTML Web Storage API) (0) | 2023.06.25 |
| HTML Drage and Drop API (0) | 2023.06.24 |
| HTML 위치 API(Geolocation API) (0) | 2023.06.23 |
| HTML 유튜브(Youtube) (0) | 2023.06.22 |
댓글