집 > 기사 > 웹 프론트엔드 > H5 멀티스레딩(Worker SharedWorker) 사용에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-03-26 15:46:043904검색

이번에는 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        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('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        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('message',function(e){
            worker2.postMessage(e.data);
        },false);
        worker2.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        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('message',function(e){
            out.innerText = e.data;
            
        },false);
    </script>
</body>
</html>
//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
<!DOCTYPE HTML>
<head>
    <title>Shared workers: demo 1</title>
</head>
<body>
    <p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += '\n' + e.data;
  }
</script>
</body>
</html>
//shared.js
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
}

　　这是从w3c拿得一个例子，下面先看第二种方法，再做分析

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.textContent += '\n' + e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  worker.port.postMessage('ping');
</script>
</body>
</html>　　
//shared
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
  port.onmessage = function(e) {
    port.postMessage('pong'); // not e.ports[0].postMessage!
    // e.target.postMessage('pong'); would work also
  }
}

　　第一种方法中是使用事件句柄的方式将听message事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。

　　那么sharedWorker是怎么共享数据的呢？请看下面的例子。

//main1 和main2都是这样
<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<p id="log"></p>
<input type="text" name="" id="txt">
<button id="get">get</button>
<button id="set">set</button>
<script>
  var worker = new SharedWorker('shared.js');
  var get = document.getElementById('get');
  var set = document.getElementById('set');
  var txt = document.getElementById('txt');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  set.addEventListener('click',function(e){
      worker.port.postMessage(txt.value);
  },false);
  get.addEventListener('click',function(e){
      worker.port.postMessage('get');
  },false);
</script>
</body>
</html>
//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    if(e.data=='get'){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

　　这里分析一波，我们在main1.html的文本框输入数据，点击set，然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据，这说明我们的sharedWorker事实上是单例的，就像java中的static类一样，不管new多少个，实际上只有一个，这样我们的不同线程就可以共享到sharedWorker中的数据了。这里把图给上，记得有篇文章没给图，然后有人给我建议了，问能不能给图。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

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

관련 기사