웹 작업자에 대해 알아야 할 7가지 사항-HTML 튜토리얼-php.cn

소개

Web Workers를 사용하면 웹 사용자 인터페이스를 차단하지 않고 백그라운드에서 JavaScript 코드를 실행할 수 있습니다. 웹 작업자는 웹 페이지의 전반적인 성능을 향상시키고 사용자 경험도 향상시킬 수 있습니다. Web Worker는 전용 Web Worker와 공유 Web Worker의 두 가지 형태로 제공됩니다. 이 기사에서는 애플리케이션에서 웹 워커를 사용하기로 결정하는 데 도움이 되기 위해 알아야 할 웹 워커의 7가지 주요 측면에 대해 설명합니다.

1.Web Workers를 사용하면 백그라운드에서 JavaScript 코드를 실행할 수 있습니다

일반적으로 웹 페이지에 작성하는 JavaScript 코드는 사용자 인터페이스와 동일한 스레드에서 실행됩니다. 이것이 긴 프로세스를 트리거하는 버튼을 클릭하면 웹 페이지의 사용자 인터페이스가 정지되는 이유입니다. 처리가 완료될 때까지 사용자 인터페이스에서 작업할 수 없습니다. 웹 작업자를 사용하면 일부 스크립트가 동시에 실행되는 경우에도 사용자 인터페이스가 계속 응답하도록 백그라운드에서 JavaScript를 실행할 수 있습니다. 스크립트를 실행하는 백그라운드 스레드를 작업자 스레드 또는 작업자라고 부르는 경우가 많습니다. 원하는 만큼 많은 작업자를 생성할 수 있습니다. 작업자 스레드에서 실행 중인 스크립트에 데이터를 전달하고 완료되면 기본 스레드에 값을 반환할 수도 있습니다. 그러나 Web Workers에는 다음과 같은 몇 가지 제한 사항이 있습니다.

웹 작업자는 웹 페이지에서 DOM 요소에 액세스할 수 없습니다.
웹 작업자는 웹 페이지에서 전역 변수 및 JavaScript 함수에 액세스할 수 없습니다.
웹 작업자는 Alert() 또는 verify() 함수를 호출할 수 없습니다.
Web Worker에서는 창, 문서, 상위 개체와 같은 개체에 접근할 수 없습니다.

단, setTimeout(), setInterval() 등의 함수를 사용할 수 있습니다. XMLHttpRequest 객체를 사용하여 서버에 Ajax 요청을 할 수도 있습니다.

2. 웹 워커에는 두 가지 유형이 있습니다

웹 작업자에는 전용 웹 작업자와 공유 웹 작업자라는 두 가지 유형이 있습니다. 전용 웹 작업자는 자신을 생성하는 웹 페이지와 함께 살고 죽습니다. 즉, 웹 페이지 내에서 생성된 전용 웹 작업자는 여러 웹 페이지에서 액세스할 수 없습니다. 반면에 공유 웹 작업자는 여러 웹 페이지에서 공유됩니다. Worker 클래스는 전용 웹 작업자를 나타내고, SharedWorker 클래스는 공유 웹 작업자를 나타냅니다.

대부분의 경우 전담 웹 작업자가 귀하의 요구 사항을 충족할 것입니다. 이는 일반적으로 작업자 스레드에서 웹 페이지에 대한 특정 스크립트를 실행해야 하기 때문입니다. 그러나 때로는 여러 웹 페이지에 공통적인 작업자 스레드에서 스크립트를 실행해야 하는 경우도 있습니다. 이 경우 각 페이지마다 하나씩 많은 전용 웹 작업자를 만드는 대신 공유 웹 작업자를 사용할 수도 있습니다. 한 웹 페이지에서 생성된 공유 웹 작업자는 다른 웹 페이지에서 계속 사용될 수 있습니다. 모든 연결이 닫혀 있는 경우에만 파괴될 수 있습니다. 공유 웹 작업자는 전용 웹 작업자보다 조금 더 복잡합니다.

3.Worker 객체는 전용 웹 워커를 나타냅니다

이제 Web Worker의 기본 사항을 이해했으므로 전용 Web Worker를 사용하는 방법을 살펴보겠습니다. 아래에 설명된 예제에서는 즐겨 사용하는 개발 도구를 사용하여 웹 애플리케이션을 만들고 해당 스크립트 폴더에 jQuery 및 Modernizr 라이브러리도 추가했다고 가정합니다. 웹 애플리케이션에 HTML 페이지를 추가하고 다음 코드를 입력합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery-2.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.webworkers)
            {
                alert("This browser doesn&#39;t support Web Workers!");
                return;
            }
            $("#btnStart").click(function () {
                var worker = new Worker("scripts/lengthytask.js");
                worker.addEventListener("message", function (evt) {
                    alert(evt.data);
                },false);
                worker.postMessage(10000);
            });
        });

    </script>
</head>
<body>
    <form>
        <input type="button" id="btnStart" value="Start Processing" />
    </form>
</body>
</html>

로그인 후 복사

위의 HTML 페이지에는 일부 JavaScript 처리를 트리거하는 버튼(btnStart)이 포함되어 있습니다. 이 페이지는 Modernizr 및 jQuery 라이브러리를 참조합니다.