H5 멀티스레딩(Worker SharedWorker) 사용에 대한 자세한 설명

이번에는 H5 멀티스레딩(Worker SharedWorker) 사용에 대한 자세한 설명과 H5 멀티스레딩(Worker SharedWorker) 사용 시 주의사항에 대해 알려드리겠습니다. 바라보다.

JavaScript에는 한 번에 한 가지 작업만 수행할 수 있다는 점은 의심의 여지가 없습니다. 한 가지 작업을 마친 후 js를 비교하는 데 시간이 걸리면 다음 작업을 수행하세요. 오랜 시간 동안 브라우저가 정지되고 사용자의 작업에 응답하지 않습니다. 어떻게 해야 합니까? 다행스럽게도 HTML5는 멀티스레딩을 구현하는 메커니즘을 제공합니다. 오래 전에 이런 좋은 기능을 사용하셨겠지만 상관없습니다. 함께 살펴보겠습니다.

1. Worker 클래스

1. 메소드 소개

(1) Constructor new Worker(arg) : 매개변수는 스레드가 실행할 코드가 있는 js 파일을 나타냅니다. 'myworker .js'와 같은 생성자는 물론 Worker 클래스의 인스턴스를 반환합니다

(2) Worker.postMessage(message): 이 메서드는 메인 스레드에서 하위 스레드 또는 하위 스레드로 메시지를 보내는 것을 의미합니다. 메시지를 메인 스레드로 보내는 것은 일반적으로 string이며, js 객체를 문자열로 변환하여 보낼 수도 있습니다.

　 (3) 누군가가 메시지를 보낼 때 메시지 이벤트도 있습니다. 게시된 값은 이벤트 개체의 데이터 속성에서 가져옵니다

Woker 클래스의 API는 가장 일반적으로 사용되는 두 가지 메서드만 사용하여 매우 간단하다는 것을 알 수 있습니다. 이벤트, 실제 사례를 통해 살펴보겠습니다.

//main.html
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker = new Worker("thread1.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker.postMessage(postData);
        },false);
        worker.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);
    </script>


//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
    postMessage(res);
}

　텍스트 상자에 "Big~Bear"를 입력하고 보내기 버튼을 클릭하면 다음과 같은 효과가 나타납니다

　간단한 분석을 위해 메인 스레드에 thead1.js로 Worker 인스턴스 워커를 생성했습니다. 버튼을 클릭하면 postMessage 메소드가 호출되어 텍스트 상자의 내용을 thread1.js로 보냅니다. 그게 전부입니다. 메시지 이벤트를 수신하고, 메시지를 보낼 때 메인 스레드가 이벤트를 트리거하고

콜백 함수를 실행합니다. 콜백 함수는 이벤트 개체에서 보낸 값을 가져온 다음 "handsome!"을 추가합니다. 이 값으로 이동한 다음 다시 보냅니다. 메인 스레드도 작업자의 메시지 이벤트를 수신하므로 메시지가 전달되면 트리거되고 메시지 내용이 p에 표시되므로 위의 효과를 볼 수 있습니다.

아마 어떤 용도로 사용하실 건가요? 여기서는 실제로 쓸모가 없습니다. 여기에서는 복잡도가 O(1)이기 때문에 항상 메인 스레드에 "handsome!"을 추가하는 작업을 완료할 수 있습니다(하하, 최근에 알고리즘을 배우고 있습니다!). 간단한 조작 모직물? 이 방법의 장점은 하위 스레드가 수행하는 작업이 아무리 복잡해도 메인 스레드가 중지되지 않는다는 것입니다. 그냥 인수하면 돼.

Lu 선생님은 하위 스레드에서 new Worker()를 호출하여 새 하위 스레드를 생성할 수 있을 것입니다. 이것이 불가능하고 정의되지 않은 오류가 보고되며 이는 Worker 생성자를 호출할 수 없음을 의미합니다. 처음에는 제가 틀린 줄 알았는데, 나중에 공식 문서를 확인해 보니 관련 설명이 없었습니다.

　 메인 스레드에서 여러 하위 스레드를 호출하는 예를 살펴보겠습니다.

//main.html
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        var worker2 = new Worker("thread2.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener(&#39;message&#39;,function(e){
            worker2.postMessage(e.data);
        },false);
        worker2.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);
    </script>


//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
        postMessage(res);    
}
//thread2.js
onmessage = function(event){
    var res = event.data+"没骗你哟！";
    postMessage(res);
    close();
}

　 메인 스레드는 작업을 완료하기 위해 두 개의 스레드가 필요합니다. 작업자1과 2라는 두 개의 스레드가 생성됩니다. 먼저 작업자1을 요청하고 반환된 데이터를 가져옵니다. 그런 다음 작업자 2에게 요청하고 동시에 작업자 1에서 처리한 데이터를 worder 2에 넘겨 처리한 후 최종 결과를 얻어 페이지에 표시합니다.

　 아래 예와 같이 다른 js 파일을 하위 스레드에 도입한 후 호출할 수 있습니다.

//main.html
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
            
        },false);
    </script>


//thread1.js
importScripts('tools.js')
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}
//tools.js
function handler(data){
    return data+"加油加油！"
}

우리의 thread1.js에는 tools.js라는 파일이 없지만 importScripts()를 통해 js 파일을 가져온 다음 내부에 노출된 메소드를 호출할 수 있는 것을 볼 수 있습니다.

2. SharedWorker 클래스

SharedWorker의 핵심은 공유입니다. 서로 다른 스레드가 하나의 스레드를 공유할 수 있으며 해당 데이터도 공유됩니다.

　예시를 통해 직접 토론해보세요.

　　使用方法一：

//main.html
nbsp;HTML>

    <title>Shared workers: demo 1</title>


    <p></p>
<script>
  var worker = new SharedWorker(&#39;shared.js&#39;);
  var log = document.getElementById(&#39;log&#39;);
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += &#39;\n&#39; + e.data;
  }
</script>

위 내용은 H5 멀티스레딩(Worker SharedWorker) 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!