Latest web development tutorials

HTML5 웹 근로자

웹 작업자는 백그라운드에서 자바 스크립트를 실행하고 페이지의 성능에 영향을주지 않습니다.

웹 작업자는 무엇인가?

HTML 페이지의 스크립트가 실행되면, 페이지 상태는 스크립트가 완료 될 때까지 응답이다.

웹 작업자가 백그라운드에서 자바 스크립트를 실행, 다른 스크립트의 독립적 인 페이지의 성능에 영향을주지 않습니다. 당신이 기꺼이 무엇이든 계속 할 수 있습니다 웹 작업자가 백그라운드에서 실행 할 때 한 번에 등 콘텐츠를 선택합니다.

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 10, 파이어 폭스, 크롬, 사파리와 오페라 지원 웹 노동자.

HTML5 웹 근로자의 예

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

예

개수 :




»시도

demo_workers.js 파일 코드 :

var에 나는 = 0;

기능 timedCount ()
{
난 = 난 1 +;
PostMessage를 (I);
에서는 setTimeout ( "timedCount ()", 500);
}

timedCount ();

브라우저가 웹 작업자를 지원하는지 여부를 검출

웹 작업자를 작성하기 전에, 사용자의 브라우저가 지원 확인하시기 바랍니다 :

(대한 typeof (노동자)! == "정의")하는 경우
{
// 예! 웹 작업자 지원!
일부 코드를//.....
}
그렇지 않으면
{
// 죄송합니다! 웹 작업자가 지원되지 않습니다
}

웹 작업자 파일을 만듭니다

이제, 외부 자바 스크립트로 웹 작업자를 만들 수 있습니다.

여기, 우리는 스크립트 카운트를 만들었습니다. 스크립트는 "demo_workers.js"파일에 저장된다 :

var에 나는 = 0;

기능 timedCount ()
{
난 = 난 1 +;
PostMessage를 (I);
에서는 setTimeout ( "timedCount ()", 500);
}

timedCount ();

코드의 중요한 부분은 위 PostMessage를 () 메소드 - 그것은 일부 HTML 페이지의 뉴스를 반환하는 데 사용됩니다.

참고 : 웹 작업자가 일반적으로 간단한 스크립트에 사용하지만, 더 CPU 집약적 인 작업하지 않습니다.

웹 작업자 개체 만들기

우리는 이미 웹 작업자 파일을 가지고, 그리고 지금 우리는 HTML 페이지에서 호출 할 필요가있다.

어떤이있는 경우 다음의 코드는, 노동자의 존재를 감지하지 않습니다 - 그것은 "demo_workers.js"코드를 실행 한 다음 새 웹 작업자 객체를 만들고 :

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

우리는 그 다음 자리를 차지할 및 웹 작업자에서 메시지를받을 수 있습니다.

는 "의 onMessage"이벤트 리스너 웹 작업자에 추가

w.onmessage = 함수 (이벤트) {
. 중요 document.getElementById ( "결과") innerHTML을 = event.data;
};

웹 작업자 종료

우리는 웹 작업자 개체를 만들 때이 종료 될 때까지 (심지어 외부 스크립트의 완료 후) 메시지를 수신 할 것입니다.

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

w.terminate ();

전체 웹 작업자 예제 코드

우리의 .js 파일 작업자 코드를 보았다. 다음 코드 HTML 페이지는 다음과 같습니다

예

<! DOCTYPE html로>
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8">
<제목>이 튜토리얼 (w3big.com) </ 제목>
</ 헤드>
<바디>

<P> 수 : <출력 한 id = "결과"> </ 출력> </ P>
<버튼의 onclick = "startWorker는 ()"> 작동하는 </ 버튼>
<버튼의 onclick = "stopWorker는 ()"> 중지 </ 버튼>

<P> <strong> 참고 : </ strong> 인터넷 익스플로러 9 웹 근로자를 지원하지 않는 IE 브라우저의 이전 버전의 </ P>.

<스크립트>
var에 w;

() {startWorker를 작동
(대한 typeof (노동자)! == "정의")하는 경우 {
경우 (대한 typeof (w) == "정의되지 않은") {
새로운 노동자 = w ( "demo_workers.js");
}
w.onmessage = 함수 (이벤트) {
. 중요 document.getElementById ( "결과") innerHTML을 = event.data;
};
} 그밖에 {
중요 document.getElementById (이하 ​​"결과") innerHTML을은 = "죄송합니다, 브라우저가 웹 근로자를 지원하지 않습니다 ...";
}
}

기능 stopWorker ()
{
w.terminate ();
= 정의되지 않은 w;
}
</ 스크립트>

</ BODY>
</ HTML>

»시도

웹 근로자와 DOM

외부 파일에 웹 작업자 때문에, 자바 스크립트는 다음 예를 개체에 접근 할 수있다 :

  • 창 개체
  • 문서 개체
  • 부모 개체