Web ワーカーについて知っておくべき 7 つのこと-htmlチュートリアル-php.cn

はじめに

Web ワーカーを使用すると、Web ユーザーインターフェイスをブロックせずに JavaScript コードをバックグラウンドで実行できます。 Web ワーカーは、Web ページの全体的なパフォーマンスを向上させ、ユーザーエクスペリエンスも向上させることができます。 Web ワーカーには、専用 Web ワーカーと共有 Web ワーカーの 2 種類があります。この記事では、アプリケーションで Web ワーカーを使用するかどうかを決定するために知っておく必要がある、Web ワーカーの 7 つの重要な側面について説明します。

1.Web Workers を使用すると、バックグラウンドで JavaScript コードを実行できます

通常、Web ページに記述した JavaScript コードは、ユーザーインターフェイスと同じスレッドで実行されます。これが、長いプロセスを引き起こすボタンをクリックすると Web ページのユーザーインターフェイスがフリーズする理由です。処理が完了するまで、ユーザーインターフェイスで作業することはできません。 Web ワーカーを使用すると、JavaScript をバックグラウンドで実行できるため、いくつかのスクリプトが同時に実行されている場合でも、ユーザーインターフェイスの応答性が維持されます。スクリプトを実行するバックグラウンドスレッドは、ワーカースレッドまたはワーカーと呼ばれることがよくあります。必要なだけワーカーを生成できます。ワーカースレッドで実行中のスクリプトにデータを渡し、完了時に値をメインスレッドに返すこともできます。ただし、Web Workers には次のようないくつかの制限があります:

Web ワーカーは Web ページから DOM 要素にアクセスできません。
Web ワーカーは、Web ページからグローバル変数や JavaScript 関数にアクセスできません。
Web ワーカーは、alert() 関数またはconfirm() 関数を呼び出すことができません。
Web Workers では、ウィンドウ、ドキュメント、親などのオブジェクトにアクセスできません。

ただし、setTimeout()、setInterval() などの関数は使用できます。 XMLHttpRequest オブジェクトを使用して、サーバーに対して Ajax リクエストを行うこともできます。

2. Web ワーカーには 2 つのタイプがあります

Web ワーカーには、専用 Web ワーカーと共有 Web ワーカーの 2 種類があります。専任の Web ワーカーは、自分たちを作成する Web ページとともに生き、そして死んでいきます。これは、Web ページ内で作成された専用 Web ワーカーには、複数の Web ページ間でアクセスできないことを意味します。一方、共有 Web ワーカーは、複数の Web ページ間で共有されます。 Worker クラスは専用の Web ワーカーを表し、SharedWorker クラスは共有 Web ワーカーを表します。

多くの場合、専任の Web ワーカーがお客様のニーズに応えます。これは、通常、Web ページの特定のスクリプトをワーカースレッドで実行する必要があるためです。ただし、場合によっては、複数の Web ページに共通のワーカースレッドでスクリプトを実行する必要があります。この場合、各ページに 1 つずつ、多数の専用 Web ワーカーを作成する代わりに、共有 Web ワーカーを使用することもできます。 1 つの Web ページで作成された共有 Web ワーカーは、他の Web ページでも引き続き使用できます。すべての接続が閉じられている場合にのみ破棄できます。共有 Web ワーカーは、専用 Web ワーカーよりも少し複雑です。

3. Worker オブジェクトは専用の Web Worker を表します

Web ワーカーの基本を理解したところで、専用の Web ワーカーの使用方法を見てみましょう。以下で説明する例では、お気に入りの開発ツールを使用して Web アプリケーションを作成し、その Script フォルダーに jQuery ライブラリと Modernizr ライブラリを追加していることを前提としています。 HTML ページを Web アプリケーションに追加し、次のコードを入力します:

<!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 ライブラリを参照していることに注意してください。

人気のチュートリアル

詳細>