JavaScript의 Web Worker에 대한 자세한 소개

이 글은 JavaScript의 Web Worker에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

소개

Web Worker는 웹 콘텐츠의 백그라운드 스레드에서 스크립트를 실행하는 간단한 방법을 제공합니다. 스레드는 사용자 인터페이스를 방해하지 않고 작업을 수행할 수 있습니다. 또한 XMLHttpRequest를 사용하여 I/O를 수행할 수 있습니다(responseXML 및 채널 속성은 항상 비어 있음). 일단 생성되면 작업자는 해당 코드로 지정된 이벤트 핸들러에 메시지를 게시하여(또는 그 반대로) 메시지를 생성한 JavaScript 코드로 메시지를 보낼 수 있습니다.

Web Worker 사용 시 핵심 포인트

• 동일 출처 제한: Worker 스레드에 할당된 스크립트 파일은 메인 스레드의 스크립트 파일과 동일한 출처를 가져야 합니다.

• DOM 제한 사항: Worker 스레드가 있는 전역 개체는 기본 스레드와 다릅니다. 기본 스레드가 있는 웹 페이지의 DOM 개체를 읽을 수 없으며 문서, 창 및 상위 개체를 사용할 수 없습니다. . 그러나 작업자 스레드는 탐색기 개체와 위치 개체를 탐색할 수 있습니다.

• 통신: 작업자 스레드와 메인 스레드는 동일한 컨텍스트에 있지 않으며 직접 통신할 수 없으며 메시지를 통해 완료되어야 합니다.

• 스크립트 제한: 작업자 스레드는 경고() 메서드와 확인() 메서드를 실행할 수 없지만 XMLHttpRequest 개체를 사용하여 AJAX 요청을 할 수 있습니다.

• 파일 제한 사항: 작업자 스레드는 로컬 파일을 읽을 수 없습니다. 즉, 로컬 파일 시스템(file://)을 열 수 없습니다. 로드하는 스크립트는 네트워크에서 가져와야 합니다. 나중에 다루도록 하겠습니다.

http-server 설치

Worker 스레드는 로컬 파일을 읽을 수 없습니다. 즉, 로컬 파일 시스템(file://)을 열 수 없습니다. 로드하는 스크립트는 네트워크에서 가져와야 합니다. 그래서 우리는 프로젝트를 감당할 수 있습니다. http-server를 사용하는 것이 가장 쉽습니다http-server最简单
安装：

> cnpm i -g http-server

使用：

> http-server

基本使用

我们新建一个文件夹名叫worker，里面新建三个文件分别是

index.html
main.js
worker.js

新建一个worker线程很简单，只需：

var worker = new Worker('worker.js')

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 发送数据事件
    postMessage('Hello, I am from Worker.js');
}

在worker文件夹下，命令行输入http-server,启动项目，用浏览器打开，看控制台：

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

从上面可以看到，worker通过onmessage来监听数据，通过postMessgae설치:

worker.terminate();

사용법:

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

기본 사용

worker라는 새 폴더를 만들고, 예

• var worker = new Worker('./worker1.js');

  새 worker 스레드를 만드는 것은 매우 간단합니다.

  console.log("I'm worker1")
  importScripts('worker2.js', 'worker3.js');
  // 或者
  // importScripts('worker2.js');
  // importScripts('worker3.js');

main.js:

• console.log("I'm worker2")

  worker.js:

  console.log("I'm worker3")

worker 폴더에 명령줄에 http-server를 입력하고 프로젝트를 시작하고 브라우저로 열고 콘솔을 보면
• rrreee

  위에서 알 수 있듯이 worker 는 onmessage를 전달하여 데이터를 수신하고 postMessgae

Termination Worker

rrreee

Handling 오류

rrreee

event.filename을 통해 데이터를 보냅니다. 오류를 일으킨 작업자 스크립트;

event .message: 잘못된 메시지

event.lineno: 오류 줄 번호

외부 스크립트 로드

main.jsrrreee
worker1.js

rrreee

worker2.jsrrreeeworker3.js

rrreee

Compatibility

https://caniuse.com/#feat=webworkers🎜호환성은 별로 낙관적이지 않지만 모바일 쪽 호환성은 꽤 좋습니다🎜🎜관련 추천 : 🎜🎜🎜JavaScript Thread API에 많은 웹 작업자가 있습니다. 연구_javascript 기술🎜🎜🎜🎜🎜JavaScript_javascript 기술 클래스에 대한 자세한 소개🎜🎜🎜🎜🎜

위 내용은 JavaScript의 Web Worker에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!