집 > 기사 > 웹 프론트엔드 > H5 멀티스레딩에서 Web Worker를 구현하는 방법

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

php中世界最好的语言원래의: 2017-12-04 10:39:461828검색

많은 사람들이 나에게 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 페이지에서 3f1c4e4b6b16bbbd69b2ee476dc4f83a

태그를 사용하여 외부 JS 파일을 로드하고, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 JS의 도메인 간 로드도 지원합니다.

Web Worker에서는 주의하세요!

Worker를 인스턴스화할 때 스크립트의 URL을 전달해야 하며 이 URL은 이 도메인에 있어야 합니다. 그렇지 않으면 도메인 간 오류가 보고됩니다! var Worker = new Worker('

https://

localhost/worker.js')

하지만 HTML의 3f1c4e4b6b16bbbd69b2ee476dc4f83a . 다음은 합법적인 사용 방법입니다.

importScripts(); /* imports nothing */ importScripts(‘foo.js’); /* imports just “foo.js” */ importScripts(‘foo.js’, ‘bar.js’); /* imports two scripts */ importScripts(‘//example.com/hello.js’); /* You can import scripts from other origins */
可以利用这里的importScripts方法解决资源预加载的问题（浏览器预先加载资源，而不会对资源进行解析和执行），道理也很简单。
Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
</script>

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