English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
웹 워커는 배경에서 실행되는 JavaScript로, 페이지 성능에 영향을 미치지 않습니다.
HTML 페이지에서 스크립트를 실행할 때, 페이지의 상태는 응답하지 않으며 스크립트가 완료될 때까지 지속됩니다.
웹 워커는 배경에서 실행되는 JavaScript로, 다른 스크립트와 독립적이며 페이지 성능에 영향을 미치지 않습니다. 어떤 작업을 하든 할 수 있습니다: 클릭, 선택 내용 등, 이때 웹 워커는 배경에서 실행됩니다.
Internet Explorer 10, Firefox, Chrome, Safari, Opera는 모두 웹 워커를 지원합니다.
아래의 예제는 간단한 웹 워커를 생성하여 배경에서 카운트합니다:
demo-workers.js 파일 코드:
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
웹 워커를 생성하기 전에, 사용자의 브라우저가 그것을 지원하는지 확인해 주세요:
if(typeof(Worker)!=="undefined")
{
// 네! 웹 워커는 지원합니다!
// 일부 코드.....
}
else
{
//죄송합니다! 웹 워커는 지원하지 않습니다
}
이제, 외부 JavaScript에서 우리의 웹 워커를 생성해 보겠습니다.
여기서, 우리는 카운트 스크립트를 생성합니다. 이 스크립트는 "demo"에 저장됩니다.-workers.js 파일 중:
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
위의 코드에서 중요한 부분은 postMessage() 메서드입니다 - 그것은 HTML 페이지로 메시지를 전달하는 데 사용됩니다.
주의: 웹 워커는 보통 이렇게 간단한 스크립트에 사용되지 않으며, 대신 CPU 자원을 더 많이 소모하는 작업에 사용됩니다.
이미 웹 워커 파일을 가지고 있습니다. 지금 HTML 페이지에서 그것을 호출해야 합니다.
아래의 코드는 워커가 존재하는지 확인합니다. 존재하지 않으면,- 그것은 새로운 웹 워커 객체를 생성한 후 "demo"을 실행합니다.-workers.js"에 있는 코드:
if(typeof(w) == "undefined")
{
w = new Worker("demo-workers.js
}
그런 다음 웹 워크어에서 발생하고 수신할 수 있는 메시지를 받을 수 있습니다.
웹 워크어에 "onmessage" 이벤트 리스너를 추가합니다:
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
웹 워크어가 메시지를 전달할 때, 이벤트 리스너 안의 코드가 실행됩니다. event.data에 데이터가 저장됩니다.
웹 워크어 객체를 생성한 후에는, 종료될 때까지 메시지를 계속监听합니다(외부 스크립트가 완료되더라도).
웹 워크어를 종료하고 브라우저에서 자원을 해제하려면:/컴퓨터 자원을 사용하려면 terminate() 메서드를 사용하세요:
w.terminate();
우리는 .js 파일에 있는 Worker 코드를 본했습니다. 아래는 HTML 페이지 코드입니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드 웹(oldtoolbag.com)</title>
</head>
<body>
<p>카운트: <output id="result"></output></p>
<button onclick="startWorker()">작업 시작</button>
<button onclick="stopWorker()">작업 중지</button>
<p><strong>주의: </<strong> 인터넷 익스플로러 9 및 더 早 기본 IE 버전 브라우저는 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 = "죄송합니다, 여러분의 브라우저는 Web Workers를 지원하지 않습니다...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>테스트를 해보세요 ‹/›web worker가 외부 파일에 위치하기 때문에 다음 JavaScript 객체에 접근할 수 없습니다:
window 객체
document 객체
parent 객체