HTML5 웹 작업자
웹 워커는 백그라운드에서 실행되는 JavaScript이며 페이지 성능에 영향을 미치지 않습니다.
웹워커란?
HTML 페이지에서 스크립트를 실행할 때 스크립트가 완료될 때까지 페이지 상태가 응답하지 않습니다.
웹 워커는 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript이며 페이지 성능에 영향을 미치지 않습니다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 선택 등 원하는 작업을 계속할 수 있습니다.
브라우저 지원
Internet Explorer 10, Firefox, Chrome, Safari 및 Opera는 모두 웹 작업자를 지원합니다.
HTML5 웹 작업자 인스턴스
다음 예에서는 백그라운드에서 계산되는 간단한 웹 작업자를 만듭니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
demo_workers.js 파일 코드:
함수 timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
브라우저가 Web Worker를 지원하는지 확인
Web Worker를 생성하기 전에, 사용자의 브라우저가 이를 지원하는지 확인하세요:
{
// 웹 작업자 지원!
/ / 일부 코드.....
}
그 외
{
// 죄송합니다. Web Worker를 지원하지 않습니다..
}
웹 작업자 파일 만들기
이제 외부 JavaScript에서 웹 작업자를 만들어 보겠습니다.
여기서 계산 스크립트를 생성합니다. 스크립트는 "demo_workers.js" 파일에 저장됩니다:
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
중요한 부분은 위의 코드는 postMessage() 메소드입니다. 메시지를 HTML 페이지로 다시 전달하는 데 사용됩니다.
참고: 웹 작업자는 일반적으로 이러한 간단한 스크립트가 아닌 CPU 집약적인 작업에 사용됩니다.
웹 작업자 개체 만들기
이미 웹 작업자 파일이 있으므로 이제 HTML 페이지에서 호출해야 합니다. /p>
다음 코드는 작업자가 존재하는지 여부를 감지하고, 존재하지 않는 경우 새 웹 작업자 객체를 생성한 다음 "demo_workers.js"에서 코드를 실행합니다: /p>
{
w=new Worker("demo_workers.js");
}
그러면 웹 워커로부터 메시지를 보내고 받을 수 있습니다.
웹 작업자에 "onmessage" 이벤트 리스너를 추가합니다.
document.getElementById("result").innerHTML= event.data;
};
<p web="" Worker=""가 메시지를 전달하면 이벤트 리스너의 코드가 실행됩니다. event.data=""에는 ="" event.data=""의 데이터가 포함되어 있습니다.
