HTML5 웹 작업자

웹워커란?

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

웹 워커는 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript이며 페이지 성능에 영향을 미치지 않습니다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 선택 등 원하는 작업을 계속할 수 있습니다.

브라우저 지원

Internet Explorer 10, Firefox, Chrome, Safari 및 Opera는 모두 웹 작업자를 지원합니다.

HTML5 Web Workers 인스턴스

다음 예에서는 백그라운드에서 계산되는 간단한 웹 작업자를 만듭니다.

<!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 파일 코드:

var i=0;

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

timedCount();

브라우저가 Web Worker를 지원하는지 감지

웹 작업자를 만들기 전에 사용자의 브라우저가 이를 지원하는지 확인하세요.

if(typeof(Worker)!= = "정의되지 않음")
{
// 웹 작업자 지원!
// 관련 코드....
}
else
{
// 지원되지 않는 웹 Worker..
}

웹 작업자 파일 만들기

이제 웹을 만들어 봅시다. 외부 JavaScript의 작업자.

여기서 계산 스크립트를 생성합니다. 스크립트는 "demo_workers.js" 파일에 저장됩니다:

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

위 코드에서 중요한 부분은 postMessage() 메소드입니다. 이 메소드는 메시지를 HTML 페이지로 다시 보내는 데 사용됩니다.

참고: 웹 작업자는 일반적으로 이러한 간단한 스크립트에 사용되지 않고 CPU 집약적인 작업에 사용됩니다.

웹 작업자 개체 만들기

이미 웹 작업자 파일이 있으므로 이제 HTML 페이지에서 호출해야 합니다. /p>

다음 코드는 작업자가 존재하는지 여부를 감지하고, 존재하지 않는 경우 새 웹 작업자 객체를 생성한 다음 "demo_workers.js"에서 코드를 실행합니다: /p>

if(typeof(w)=="정의되지 않음")
{
w=new Worker("demo_workers.js");
}

그러면 Web Worker와 메시지를 주고받을 수 있습니다.

웹 작업자에 "onmessage" 이벤트 리스너 추가:

w.onmessage=function(event){
document.getElementById("result") .innerHTML=event.data;
};

<p web="" Worker=""가 메시지를 전달하면 이벤트 리스너의 코드가 실행됩니다. event.data=""에는 ="" event.data=""의 데이터가 포함되어 있습니다.

Web Worker 종료

웹 작업자 개체는 종료될 때까지 (외부 스크립트가 완료된 후에도) 계속해서 메시지를 수신합니다.

웹 작업자를 종료하고 브라우저/컴퓨터 리소스를 해제하려면 quit() 메소드를 사용하십시오:

w.terminate();

전체 Web Worker 예제 코드

.js 파일에서 Worker 코드를 확인했습니다. HTML 페이지의 코드는 다음과 같습니다.

<!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>

웹 작업자 및 DOM

웹 작업자는 외부 파일에 있으므로 , 액세스할 수 없습니다. 다음 JavaScript 객체:

창 개체
문서 개체
상위 개체

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전