H5 멀티스레딩에서 Web Worker를 구현하는 방법

php中世界最好的语言
풀어 주다: 2017-12-04 10:39:46
원래의
1858명이 탐색했습니다.

많은 사람들이 나에게 H5 멀티스레딩에서 Web Worker를 구현하는 방법을 묻습니다. 이 질문에 대해 이야기할 때 먼저 Web Worker가 무엇인지 알아야 하므로 오늘은 이 질문에 대한 답변을 드리겠습니다.

JavaScript 코드가 백그라운드 실행을 위해 Web Worker에 전달되면 페이지가 중단되는 것을 방지하기 위해 JavaScript가 실행되는 동안 페이지는 계속해서 사용자 작업에 응답할 수 있습니다. 사용자는 소규모 분산 컴퓨팅 및 기타 작업을 포그라운드에서 수행할 수 있도록 여러 작업자 스레드를 만들 수 있습니다.

분산 컴퓨팅은 중앙 집중식 컴퓨팅과 반대되는 컴퓨팅 방식입니다. 컴퓨팅 기반이 발전함에 따라 일부 응용 프로그램을 완료하려면 매우 큰 컴퓨팅 성능이 필요합니다. 중앙 집중식 컴퓨팅을 사용하면 완료하는 데 오랜 시간이 걸립니다. 분산 컴퓨팅은 애플리케이션을 여러 개의 작은 부분으로 나누고 처리를 위해 여러 컴퓨터에 할당합니다. 이는 전체 컴퓨팅 시간을 절약하고 컴퓨팅 효율성을 크게 향상시킬 수 있습니다.

위에서 언급한 소규모 분산 컴퓨팅은 CPU 멀티 코어를 효율적으로 사용하는 것입니다.

스레드에서 수행할 수 없는 작업:

Web Worker는 DOM 노드에 액세스할 수 없습니다 DOM을 공유할 수 없는 것이 정상입니다. 그렇지 않으면 여기에서 DOM이 조작되고 있으며 Worker도 DOM을 조작하거나 심지어 DOM을 삭제하기도 합니다. . 이미 충돌이 아닌가요? Web Worker는 전역 변수 또는 전역 함수에 액세스할 수 없습니다. Web Worker는 window 및 document와 같은 브라우저 전역 변수에 액세스할 수 없습니다.

Can setTimeout(),clearTimeout(), setInterval(),clearInterval() 및 기타 기능을 사용할 수 있습니다.

navigator 객체

를 사용할 수 있습니다. XMLHttpRequest를 사용하여 이 스레드의 범위를 얻을 수 있습니다. 웹 워커 전용 스레드(전용 웹 워커)와 공유 스레드(공유 웹 워커)의 두 가지 유형으로 나눌 수 있습니다. 전용 스레드는 이를 생성한 페이지에서만 액세스할 수 있으며 현재 페이지가 닫힐 때 종료됩니다. 반면 공유 스레드는 여러 페이지에서 액세스할 수 있으며 연결된 모든 페이지가 닫힐 때만 종료됩니다. 전용 스레드에 비해 공유 스레드는 약간 더 복잡합니다.

Web Worker에 대한 브라우저 지원 감지

if(typeof(Worker)!=="undefined")  {  
    // Yes! Web worker support!  
}  else  {  
    // Sorry! No Web Worker support..  
}
로그인 후 복사

Web Worker 개체 및 파일 만들기:

다음은 아마도 가장 간단한 초보 수준 JS 멀티 스레드 데모입니다.

여기에 그림 설명 쓰기

스레드 만들기

var Worker = new Worker(url);//url은 스레드에서 실행해야 하는 JavaScript 파일의 이름과 해당 경로

스레드 통신

메인 스레드와 하위 스레드 간 통신을 위해 postMessage 그리고 스레드 객체의 onmessage 메소드가 사용됩니다. 누가 누구에게 데이터를 보내든 송신자는 postMessage 메소드를 사용하고 수신자는 onmessage 메소드를 사용하여 데이터를 수신합니다. postMessage와 onmessage 모두 하나의 매개변수만 가지고 있습니다. onmessage의 매개변수가 event라고 가정하면, 수신된 데이터는 event.data를 통해 얻어집니다.

스레드 소멸

스레드 외부에서는 스레드 인스턴스의 종료 메소드를 사용하여 스레드를 소멸시킵니다. 스레드 내부에서는 close 메소드를 사용하면 스레드가 스스로 소멸됩니다.

오류 처리

스레드에서 오류가 발생하는 경우 , onerror 이벤트 콜백이 호출됩니다.

var worker = new Worker("test.js");
worker.onerror = function(event){
    console.log("load web worker error." + event);
}
로그인 후 복사

JSON 데이터 보내기

복잡한 데이터를 JSON으로 보내세요!

Web Worker에서 importScripts를 사용하여 외부 JS를 로드

HTML 페이지에서
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿