우리 모두는 브라우저가 단일 스레드에서 js 코드를 실행한다는 것을 알고 있습니다. 페이지 단계가 실행되면 페이지는 단계가 끝날 때까지 다른 어떤 것에도 응답할 수 없습니다. 여기에 소개된 WebWorker는 모든 것을 변경할 수 있습니다.
WebWorker는 다른 스크립트와 독립적으로 백그라운드에서 실행되며 페이지 성능에 영향을 주지 않는 js 코드입니다. WebWorkers가 백그라운드에서 실행되는 동안 클릭, 콘텐츠 선택 등 원하는 작업을 계속 수행할 수 있습니다.
웹 작업자는 Internet Explorer를 제외한 모든 주요 브라우저에서 지원됩니다.
첫 번째 단계: 작업자를 생성합니다.Worker() 생성자를 호출하고 작업자 스레드에서 실행할 스크립트의 URI를 지정합니다. 예를 들어 현재 페이지에서는 작업자 스레드에서 실행되는 스크립트가 script-worker.js라고 지정합니다.
var myWorker = new Worker(script-worker.js);
script-worker.js에서 추가 코드를 실행할 수 있으며, 이 코드를 실행해도 페이지에서 원하는 다른 작업을 수행하는 데 영향을 미치지 않습니다. 이는 좋은 일입니다.
2단계: 데이터를 전달합니다.페이지는 작업자와 상호 작용하여 데이터를 전송할 수 있으므로 작업자는 의미 있는 작업을 수행하는 페이지의 기능에 영향을 주지 않고 자동으로 계산할 수 있습니다. 그런 다음 페이지에 데이터를 사용하도록 지시합니다.
//[메인 페이지 코드]myWorker.postMessage(data-from-mainpage);//[작업자 코드]onmessage = function (oEvent) { console.log(메인 페이지에서 보내는 데이터는 +oEvent.data)) ;위의 상황은 [메인페이지가 작업자 스크립트에 데이터를 보냅니다.] 네, 아주 친근한 포스트를 보셨죠.메세지 좋아요, 이게 맘에 드네요.
//[메인 페이지 코드] myWorker.onmessage = function (oEvent) { console.log(작업자 스크립트에서 보낸 데이터는 +oEvent.data)) }; 메인페이지 );위는 [작업자 스크립트가 메인 페이지로 데이터를 보내는] 상황입니다. 여전히 매우 간단하지만 이는 단지 API일 뿐이며, 핵심은 영리하게 사용하는 것이 유익하다는 것입니다.
또한 작업자 실행에 오류가 있을 수 있으며 기본 페이지는 다음과 같이 전달됩니다.
myWorker.onerror=function(oEvent){};작업자 오류를 모니터링할 수 있습니다.
3단계: 중요 사항.작업자 스레드는 UI를 방해하지 않고 작업을 수행할 수 있습니다. 실행된 JavaScript 코드는 완전히 다른 범위에 있으며 현재 웹 페이지의 코드와 범위를 공유하지 않습니다.
importScripts() 메서드는 JavaScript 파일을 가리키는 하나 이상의 URL을 수신하는 Worker의 전역 범위에서 제공됩니다. 로딩 프로세스는 비동기적으로 수행됩니다.
importScripts()는 절대 URI를 제공하는 경우에만 적용되며 실행 프로세스도 비동기식입니다.
WebWorkers 객체를 생성하면 종료될 때까지 (외부 스크립트가 완료된 후에도) 계속해서 메시지를 수신합니다. myWorker.terminate() 메서드를 사용하여 WebWorkers를 종료하고 브라우저/컴퓨터 리소스를 해제합니다.
4단계: 중요한 제한 사항.1. DOM 노드, 전역 변수 또는 전역 함수에 접근할 수 없고, 경고() 또는 확인과 같은 함수를 호출할 수 없으며, 창 및 문서와 같은 브라우저 전역 변수에 접근할 수 없습니다.
2. 그러나 Web Worker의 Javascript는 setTimeout() 및 setInterval()과 같은 기능을 계속 사용할 수 있으며 Ajax 통신을 위해 XMLHttpRequest 객체를 사용할 수도 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.