HTML 네트워킹 작업자 깊이

15259 단어 html codenewbie webdev beginners

JavaScript는 페이지 성능에 영향을 주지 않고 백그라운드에서 실행됩니다.

당신은 HTML/CSS를 처음 사용한 사람입니까, 아니면 HTML의 고급 기능을 깊이 이해하고 싶은 사람입니까?그럼 잘 왔네.따라서 커피를 한 잔 마시고 우리 HTML 시리즈의 첫 번째 부분을 즐기며 HTML 네트워크 종사자들을 깊이 있게 이해하자.

문제

한 가지 상황을 고려하여 UI 이벤트를 처리하거나 대량의 API 데이터를 처리하거나 DOM 조회를 조작해야 합니다.그럼 자바스크립트는 뭐 해요?CPU 활용도가 높으면 JavaScript가 브라우저를 종료합니다.JS는 단일 스레드 환경에서 실행됩니다. 이것은 여러 개의 스크립트를 동시에 실행할 수 없다는 것을 의미합니다.이것은 함수 A가 완성되기 전에 함수 B를 실행할 수 없다는 것을 의미한다.이 과정에서 HTML 페이지는 스크립트가 끝날 때까지 응답하지 않습니다.

*We can mimic the ‘concurrency’ concept by using techniques like **setTimeout(), setInterval(), XMLHttpRequest **and event handlers. All of these features run asynchronously and doesn’t block anything but these doesn't necessarily mean concurrency.*

wiki: 병발성은 프로그램, 알고리즘 또는 문제의 서로 다른 부분이나 단원이 최종 결과에 영향을 주지 않는 상황에서 순서 또는 일부 순서대로 실행하는 능력을 가리킨다**

솔루션

사이버 요원이 구조하러 왔다!Worker는 JS 스크립트로 백엔드에서 단독 라인으로 실행됩니다. 즉, 다른 스크립트에 독립적으로 실행되며 페이지의 성능에 영향을 주지 않습니다.네트워크 작업자가 백그라운드에서 긴 스크립트를 실행할 때, 우리는 계속해서 끊임없이 탐색, 마우스 이벤트 등을 진행할 수 있다.이것은 웹 페이지가 응답성을 가지게 할 것이다.

Note: Even though, Web Workers are relatively heavy-weight background scripts, they are not intended to be used in large numbers.

JavaScript Web Workers를 사용하는 이유는 무엇입니까?

은 병렬 프로그래밍을 이용하여 여러 개의 조작을 동시에 실행할 수 있다

은 주 실행 루트

과 분리된 백그라운드 루트를 만들 수 있습니다

은 고립된 라인에서 비싼 조작을 할 수 있기 때문에 응답 능력과 속도를 높일 수 있다.

Web Worker는 코어 수준의 스레드입니다.

네트워크 작업자는 더 많은 공간과 CPU 시간을 필요로 한다.

Web Worker는 서버 쪽이 아닌 클라이언트에서 코드를 실행합니다.

Webworker 루틴은 postMessage() 리셋 방법으로 서로 통신하여 스크립트가 완성될 때 알림을 얻을 수 있습니다

네트워크 작업자의 유형(전용 및 공유 작업자)

HTML5에서 네트워크 작업자는 두 가지 유형으로 구성됩니다.

전문 네트워크 종사자:

전용 작업 프로세스는 호출된 스크립트 하나만 접근할 수 있습니다.작업 스레드가 부모 스레드가 끝날 때 끝납니다.

공유 네트워크 종사자:

공유 작업 프로세스는 여러 스크립트에서 공유할 수 있고 포트를 사용하여 통신할 수 있습니다.공유 작업 프로세스는 다른 창, iFrame 또는 작업 프로세스에서 액세스할 수 있습니다.

전용 작업 루틴은 처음에 생성된 스크립트에서만 접근할 수 있고, 공유 작업 루틴은 여러 스크립트에서 접근할 수 있습니다.

Web Worker 파일을 만들려면 다음과 같이 하십시오.

1. Web Worker 시작 작업 만들기

Worker 파일을 시작하려면 터치 포인트를 받아야 합니다. (예를 들어 단추를 누르거나 다른 마우스 이벤트를 통해)

    <!-- An action to start Web Worker -->
    <button onclick="startWorker()">Start Worker</button>

    <!-- An action to stop Web Worker -->
    <button onclick="stopWorker()">Stop Worker</button>

2. Web Worker 가용성 확인

우리는 간단한 조건 문장을 작성하여worker 기능의 가용성을 검사할 수 있다. 예를 들어

if(typeof(Worker) !== “undefined”) {
    <!--    Start the Worker -->
}

3. Web Worker 객체 만들기/Worker 생성

worker는 특정 JavaScript 파일을 실행하는 구조 함수 (예: Worker()) 를 사용하여 만든 객체입니다.

<!-- creation of worker object -->
Worker(aURL, options);

매개변수:

aURL은 작업자가 실행하고자 하는 스크립트의 URL을 나타내는 문자열입니다.

옵션은 사용자 정의 Worker 인스턴스의 객체입니다.사용 가능한 옵션은 유형, 자격 증명 및 이름입니다.그러나 우리는 반드시 그것들을

으로 지정할 필요가 없다
현재, 지정한javascript 파일이 존재하면, 브라우저는 새로운 작업 라인을 생성합니다. 이 라인은 비동기적으로 작동합니다.URL 경로가 404 오류로 되돌아오면 작업 프로세스가 자동으로 실패합니다.

웹 작업자의 탐지기 (onmessage ()

메인 라인은 onmessage 이벤트를 통해worker를 정탐합니다.메시지는 서로 다른 라인에서 서로 발송되고 수신될 수 있다.예:

    <!-- src/main.js -->
    const worker = new Worker("../src/worker.js");
    worker.onmessage = e => {
       document.getElementById(“result”).innerHTML = e.data;
    };

주 스레드에서 작업 스레드까지:

   <!-- src/main.js -->
    const worker = new Worker(“../src/worker.js”);

    <!-- recieve message from worker -->
    worker.onmessage = e => {
     const message = e.data;
     console.log(`[From Worker]: ${message}`);
    };

    <!-- post message to worker -->
    worker.postMessage(“Marco!”);

작업 스레드에서 주 스레드로:

    <!-- src/worker.js -->
    onmessage = e => {
      const message = e.data;
      console.log(`[From Main]: ${message}`);

    postMessage("Polo!");
    };

따라서 결과는 다음과 같습니다.

    <!-- [From Main]: Marco! 
         [From Worker]: Polo! -->

주 루틴과 작업 루틴 사이에 무한히 메시지를 보내다

    // src/main.js

    const worker = new Worker(“../src/worker.js”);

    worker.onmessage = e => {
     const message = e.data;
     console.log(`[From Worker]: ${message}`);

    const reply = setTimeout(() => worker.postMessage(“Marco!”), 3000);
    };

    worker.postMessage(“Marco!”);

전체 예:

    <html lang="en">
      <head>
        <title>Web Workers Demo</title>
        <meta charset="UTF-8" />
      </head>

    <body>
        <div id="app"></div>
        <h1>Web Workers Demo: The Basics</h1>
        <button onclick="startWorker()">Start Worker</button>
        <button onclick="stopWorker()">Stop Worker</button>

    <script src="src/main.js"></script>
      </body>
    </html>

    //main.js

    function startWorker() {
     var w;

    if(typeof(Worker) !== “undefined”) {
        if(typeof(w) == “undefined”) {
          w = new Worker(“demo_workers.js”);
        }
        w.onmessage = function(event) {
          document.getElementById(“result”).innerHTML = event.data;
     };
     } else {
        document.getElementById(“result”).innerHTML = “Sorry, your       browser does not support Web Workers…”;
      }
    }

    function stopWorker() {
      w.terminate();
      w = undefined;
    }

Web Worker를 생성하면 Web Worker와 상위 페이지 간의 통신은postMessage() 방법으로 완료됩니다.

    //workers.js (external javascript file)

    var i = 0;

    function timedCount() {
     i = i + 1;
     postMessage(i);
     setTimeout(“timedCount()”,500);
    }

    timedCount();

Note: By using setInterval() and setTimeout() JavaScript functions also we can make web workers perform periodic tasks.

Web Worker 종료

웹worker 대상을 만들 때, 외부 스크립트가 끝난 후에도 메시지를 계속 정탐합니다.
웹 Worker를 종료하고 브라우저/컴퓨터 자원을 방출하려면 terminate() 방법을 사용하십시오.

    w.terminate();

오류 처리

    worker.onerror = function (event) {
          console.log(event.message, event);
    };

Web Worker 재사용

Worker 변수를 종료한 후 정의되지 않은 것으로 설정하면 코드를 다시 사용할 수 있습니다.

w = undefined;

Full example: https://auth0.com/blog/speedy-introduction-to-web-workers/

산란업자

만약 노동자가 원한다면, 그들은 한 명 이상의 노동자를 만들 수 있다.이것들은 일꾼이라고 불린다.이 하위 작업자는 부모 페이지와 같은 원점에 있어야 합니다.또한 하위 작업자의 URL은 HTML 페이지가 아닌 상위 작업자의 위치를 기준으로 해야 합니다.이로 인해 직원들은 그들의 의존 관계가 어디에 있는지 추적하기 쉽다.

여러 JS 파일 사용

프로그램이 여러 개의 JavaScript 파일을 사용해야 한다면, 전역 함수인 importScripts() 방법으로 가져올 수 있습니다. 이 방법은 파일 이름을 매개 변수로 하고 쉼표로 구분합니다. 아래와 같습니다.−

    importScripts("script1.js", "script2.js");

브라우저가 나열된 모든 스크립트를 불러오고 실행합니다.그리고 모든 스크립트의 모든 전역 대상은 일꾼이 사용할 수 있다.스크립트를 로드할 수 없는 경우 NETWORK\u 오류가 발생하면 후속 코드가 실패합니다.
예:
이 프레젠테이션은worker 스크립트 (script1.js) 를 사용합니다. 변수 a를 정의하는importScript를 사용하여 다른 간단한 스크립트를 가져옵니다.

    <!-- script in index.html -->
    var worker = new Worker("script1.js");

    worker.addEventListener("message", function(e){
        alert("Hello " + e.data);
    });

    worker.postMessage(true);

첫 번째 JS 파일

    <!-- script1.js -->
    self.addEventListener("message", function(e){
        var a = "World";
        importScripts("script2.js");
        self.postMessage(a);
    });

두 번째 JS 파일

    a = "Hello";

importScripts는 동기화되지만, 변수를 두 번째 스크립트에서 현재 함수 범위가 아닌 전역 범위로 가져옵니다.국부 변수 a는 "Hello"가 아니라 "world"로 유지됩니다.

Note: In the context of a worker, both self and this reference the global scope for the worker.

웹 작업자 및 DOM

웹 Worker는 외부 파일에 있으므로 다음 JavaScript 객체에 액세스할 수 없습니다.

DOM 객체(스레드가 안전하지 않으므로)

You can’t directly manipulate the DOM from inside a worker.

창 객체

workers run in another global context that is different from the current window. Thus, using the window shortcut to get the current global scope (instead of self) within a Worker will return an error.

상위 객체

In addition to the standard JavaScript set of functions (such as String, Array, Object, JSON, etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.

Web Worker는 언제 사용됩니까?가장 흔히 볼 수 있는 작업은 맞춤법 검사, 문법 강조 표시, 프리페치 및 캐시 데이터를 포함한다.

공유 작업 프로세스 생성

새로운 공유worker를 생성하는 것은 전용worker와 거의 같지만 서로 다른 구조 함수 이름을 가지고 있습니다.SharedWorker 객체를 사용합니다.

var myWorker = new SharedWorker('worker.js');

하나의 큰 차이점은 공유worker에 대해 우리는 port 대상을 통해 통신해야 한다는 것이다.스크립트에서 작업자와 통신할 수 있는 현식 포트를 엽니다.메시지를 발표하기 전에 onmessage 이벤트 프로세서를 사용하여 포트 연결을 암시적으로 시작하거나 start() 방법으로 포트 연결을 현시적으로 시작해야 합니다.
메시지 이벤트가 start() 방법으로 연결될 때만 addEventListener()을 호출해야 합니다.

공유 작업 스레드 간에 메시지 보내기

현재는worker에 이전처럼 메시지를 보낼 수 있으나,port 대상을 통해 postMessage() 방법을 호출해야 합니다.

    var eventTrigger1 = document.querySelector(‘#event1’);

    var eventTrigger2 = document.querySelector(‘#event2’);

    if (!!window.SharedWorker) {
     var myWorker = new SharedWorker(“worker.js”);

    eventTrigger1.onchange = function() {
        myWorker.port.postMessage(eventTrigger1.value);
        console.log(‘Message posted to worker’);
     }

    myWorker.port.onmessage = function(e) {
     eventTrigger2.textContent = e.data;
     console.log(‘Message received from worker’);
     }
    }

현재 노동자에게는 worker.js에서도 조금 더 복잡하다.
우리는 이 이벤트 대상의 포트 속성을 사용하여 포트를 가져와 변수에 저장합니다.

onconnect = function(e) {
      var port = e.ports[0];

      port.onmessage = function(e) {
        var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
        port.postMessage(workerResult);
      }
    }

데이터 전송

홈 페이지와 보조 프로세스 간에 전달되는 데이터는 공유된 것이 아니라 복제된 것이다.대상이 작업 프로세스에 전달될 때 서열화되고 다른 쪽에서 반서열화됩니다.페이지와 보조 프로세스는 같은 실례를 공유하지 않기 때문에 최종 결과는 각 끝에 복사본을 만드는 것이다.대부분의 브라우저는 이 기능을 structured cloning으로 실현합니다.

Note: know more at link

이동 가능 객체

전송 가능한 객체를 사용하여 데이터를 하나의 컨텍스트에서 다른 컨텍스트로 제로 복제하여 작업자에게 데이터를 전송하는 성능을 크게 향상시킵니다.예를 들어, ArrayBuffer를 주 응용 프로그램에서worker로 전송할 때, 원시 ArrayBuffer는 삭제되어 더 이상 사용할 수 없습니다.컨텐트가 작업 컨텍스트로 전송됩니다.
자세한 내용은 link으로 문의하십시오.

고급 주제:

자공: 노동자는 아동공을 낳을 능력이 있다.이것은 운행할 때 대형 임무를 한층 더 분해하는 데 매우 유용하다.
인라인 작업자: Blob () 를 사용하여 작업자 코드의 URL 핸들을 문자열로 생성하여 기본 논리와 동일한 HTML 파일에 작업자를 인라인 처리합니다.
스레드 안전: 웹 직원들이 다른 스레드와의 통신점을 자세하게 제어하기 때문에 병발 문제의 가능성을 현저히 낮춘다.비스레드 보안 구성 요소 또는 DOM에 액세스할 수 없습니다.서열화된 대상을 통해 특정한 데이터를 전송하고 전송해야 합니다.
로컬 액세스 제한: 구글 브라우저의 보안 제한으로 인해 작업자는 최신 버전의 브라우저에서 로컬로 실행되지 않습니다(예를 들어 파일로부터://).따라서 file://에서 프로그램을 실행하려면 --allow-file-access-from-files으로 Chrome을 실행해야 합니다.
동원 주의사항: 우리는 데이터:URL 또는javascript:URL에서 스크립트를 불러올 수 없습니다. https:page는 http: URL로 시작하는 작업 스크립트를 시작할 수 없습니다.