웹 워커 API
- 이전 페이지 웹 스토리지 API
- 다음 페이지 Web Fetch API
Web Worker는 백그라운드에서 실행되는 JavaScript로, 페이지 성능에 영향을 미치지 않습니다.
Web Worker는 무엇인가요?
HTML 페이지에서 스크립트를 실행할 때, 스크립트가 완료되기 전까지 페이지는 응답하지 않습니다.
Web Worker는 백그라운드에서 실행되는 JavaScript로, 다른 스크립트와 독립적이며 페이지 성능에 영향을 미치지 않습니다. 어떤 것을 원하든지 계속 할 수 있습니다: 클릭, 선택 등, 동시에 백그라운드에서 웹 워커가 실행됩니다.
브라우저 지원
표에서의 숫자는 Web Workers를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다:
| 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 4 | IE 10 | 파이어폭스 3.5 | 사파리 4 | 오페라 11.5 |
| 2010 년 1 월 | 2012 년 9 월 | 2009 년 6 월 | 2009 년 6 월 | 2011 년 6 월 |
Web Worker 브라우저 확인
web worker를 생성하기 전에 사용자의 브라우저가 그것을 지원하는지 확인하십시오:
if (typeof(Worker) !== "undefined") {
// 예! Web worker 지원!
// 일부 코드.....
else {
// 죄송합니다! Web Worker 지원이 없습니다.
}
Web Worker 파일을 생성하십시오
이제, 외부 JavaScript에서 우리의 Web Worker를 생성해 보겠습니다.
여기서, 중요한 스크립트를 생성합니다. 이 스크립트는 "demo_workers.js" 파일에 저장됩니다:
let i = 0;
function timedCount() {
i++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
위 코드의 중요한 부분은 postMessage() 메서드 - 메시지를 HTML 페이지로 돌려보내는 데 사용됩니다.
주의사항:일반적으로 web worker는 이러한 간단한 스크립트 대신 CPU 집중형 작업에 사용됩니다.
Web Worker 객체 생성
지금 우리는 web worker 파일을 가지고 있지만, HTML 페이지에서 그를 호출해야 합니다.
다음 코드行은 worker가 존재하는지 확인하고, 존재하지 않으면 새로운 web worker 객체를 생성하여 "demo_workers.js"에 있는 코드를 실행합니다:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
그런 다음 우리는 web worker에서 온 메시지를 보내고 받을 수 있습니다.
web worker에 "onmessage" 이벤트 리스너를 추가합니다.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Web Worker가 메시지를 발행할 때, 이벤트 리스너에 있는 코드가 실행됩니다. Web Worker에서 온 데이터는 event.data에 저장됩니다.
Web Worker 종료
web worker 객체가 생성될 때, 그가 종료될 때까지 메시지를 계속 수신합니다(외부 스크립트가 완료된 후에도). 그를 종료하려면 다음을 사용하십시오:
web worker 객체가 생성될 때, 그가 종료될 때까지 메시지를 계속 수신합니다(외부 스크립트가 완료된 후에도). 그를 종료하려면 다음을 사용하십시오: terminate() 메서드:
w.terminate();
Web Worker 재사용
worker 변수를 undefined로 설정하면, 그가 종료된 후 다음 코드를 재사용할 수 있습니다:
w = undefined;
전체 Web Worker 예제 코드
우리는 .js 파일에서 Worker 코드를 본 것입니다. 아래는 HTML 페이지 코드입니다:
예제
<!DOCTYPE html>
<html>
<body>
<p>숫자 계산: <output id="result"></output></p>
<button onclick="startWorker()">스타트 워커</button>
<button onclick="stopWorker()">워크어너 정지</button>
<script>
let w;
function startWorker() {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Worker 및 DOM
Web Worker가 외부 파일에 위치하고 있기 때문에 다음 JavaScript 객체에 접근할 수 없습니다:
- window 객체
- document 객체
- parent 객체
- 이전 페이지 웹 스토리지 API
- 다음 페이지 Web Fetch API
