HTML5 웹 작업자-H5 튜토리얼-php.cn

HTML5 웹 작업자

高洛峰

풀어 주다： 2017-02-06 14:05:16

원래의

1465명이 탐색했습니다.

웹워커란?

웹 워커는 백그라운드에서 실행되는 JavaScript이므로 페이지 성능에 영향을 미치지 않습니다.

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

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

HTML5 Web Workers 인스턴스

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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 Workers를 지원하는지 감지

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

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持 
}

로그인 후 복사

웹 작업자 파일 만들기

이제 외부 JavaScript에서 웹 작업자를 만들어 보겠습니다.

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

var i=0;

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

timedCount();

로그인 후 복사

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

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

웹 작업자 개체 만들기

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

다음 코드는 작업자가 존재하는지 여부를 감지하고, 없으면 새 웹 작업자 개체를 생성한 다음 "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;
};

로그인 후 복사

웹 작업자를 종료합니다.

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

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

w.terminate();

웹 작업자 인스턴스 코드 완성

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

Instance

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</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 개체에 액세스할 수 없습니다.

    window 对象
    document 对象
    parent 对象

로그인 후 복사

더 보기 HTML5 Web Workers 관련 기사는 PHP 중국어 웹사이트를 주목해주세요!