집 > 기사 > 웹 프론트엔드 > H5+WebWorkers의 멀티 스레드 개발 및 사용에 대한 자세한 설명

H5+WebWorkers의 멀티 스레드 개발 및 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-07 17:38:122306검색

이번에는 H5+WebWorkers 멀티스레드 개발 사용에 대해 자세히 설명하겠습니다. H5+WebWorkers 멀티스레드 개발의 주의사항은 무엇인가요?

우리 모두는 브라우저가 단일 스레드에서 js 코드를 실행한다는 것을 알고 있습니다. 페이지 단계가 실행되면 페이지는 단계가 끝날 때까지 다른 어떤 것에도 응답할 수 없습니다. 여기에 소개된 WebWorker는 모든 것을 변경할 수 있습니다.

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

웹 작업자는 Internet Explorer를 제외한 모든 주요 브라우저에서 지원됩니다.

1단계: 작업자를 생성합니다.

Worker()constructor를 호출하고 작업자 스레드에서 실행할 스크립트의 URI를 지정합니다. 예를 들어 현재 페이지에서는 작업자 스레드에서 실행되는 스크립트가 script-worker.js라고 지정합니다.

var myWorker = new Worker("script-worker.js");

script-worker.js에서는 추가 코드를 실행할 수 있습니다. 이러한 코드를 실행해도 페이지에서 원하는 다른 작업을 수행하는 데 영향을 미치지 않습니다.

2단계: 데이터를 전달합니다.

페이지는 작업자와 상호 작용하여 데이터를 전송할 수 있으므로 작업자는 페이지에 영향을 주지 않고 조용히 계산하여 의미 있는 작업을 수행할 수 있습니다. 그런 다음 페이지에 데이터를 사용하도록 지시합니다.

//[主页面代码]
myWorker.postMessage("data-from-mainpage");
//[worker代码]
onmessage = function (oEvent) {
    console.log("主页面发送过来的数据是："+oEvent.data));    
};

위는 [메인페이지에서 워커스크립트로 데이터를 보내는 상황] 네, 아주 친절한 글을 보셨네요. 메시지 좋아요, 좋아요.

 //[主页面代码]
 myWorker.onmessage = function (oEvent) {
     console.log("worker脚本发送过来的数据是："+oEvent.data)); 
 }; 
//[worker代码]
postMessage("data-from-mainpage");

위는 [워커 스크립트가 메인 페이지에 데이터를 보내는] 상황입니다. 여전히 매우 간단하지만 이는 단지 API일 뿐이며 핵심은 영리하게 사용하는 것이 유익하다는 것입니다.

또한 작업자 실행에 오류가 있을 수 있습니다. 메인 페이지에서는

myWorker.onerror=function(oEvent){};

를 통해 작업자 오류를 모니터링할 수 있습니다.

3단계: 중요 사항.

작업 스레드는 UI를 방해하지 않고 작업을 수행할 수 있습니다. 실행된 JavaScript 코드는 완전히 다른 범위에 있으며 현재 웹 페이지의 코드와 범위를 공유하지 않습니다.

importScripts() 메서드는 JavaScript 파일을 가리키는 하나 이상의 URL을 수신하는 Worker의 전역 범위에서 제공됩니다. 로딩 프로세스는 비동기적으로 수행됩니다.

importScripts()는 절대 URI를 제공하는 경우에만 적용되며 실행 프로세스도 비동기식입니다.

WebWorkers 개체를 생성하면 종료될 때까지 (외부 스크립트가 완료된 후에도) 계속해서 메시지를 수신합니다. myWorker.terminate() 메서드를 사용하여 WebWorkers를 종료하고 브라우저/컴퓨터 리소스를 해제합니다.

4단계: 중요한 제한사항.

1. DOM 노드에 액세스할 수 없고, 전역 변수 또는 전역 함수에 액세스할 수 없으며, 경고() 또는 확인과 같은 함수를 호출할 수 없으며, 창 및 document와 같은 브라우저 전역 변수에 액세스할 수 없습니다. ;

2. 그러나 Web Worker의 Javascript는 계속해서 setTimeout(), setInterval()과 같은 함수를 사용하거나 Ajax 통신을 위해 XMLHttpRequest 객체를 사용할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!