11

私はこれまで Web Workers を使用したことがなく、Web Worker について理解するのに苦労していることを覚えておいてください。

これは、私がやっていることの簡略化されたバージョンの説明です。

マイ ページにはさまざまなファイルへのリンクがあります。テキスト ファイルやイメージ ファイルなどがあります。各ファイルには、一般的なファイル アイコンを示すイメージがあります。

スクリプトで、各一般的なアイコンをファイルの内容のプレビューに置き換えるようにしたいと考えています。

スクリプトはサーバーからファイルを要求し (プリローダーのようにファイルをキャッシュに追加します)、次にキャンバスを作成し、その上にプレビューを描画します (画像のサムネイル、テキスト ファイルのテキストの抜粋、より具体的なアイコンメディア ファイルの場合...)、最後にデータ URL を使用して汎用アイコンのソースをキャンバスに置き換えます。

私はこれを非常に簡単に行うことができます。ただし、動作中に UI に干渉しないように、バックグラウンドで実行することをお勧めします。

これに飛び込む前に、知っておく必要があります: Workers はキャンバスで作業できますか? また、できる場合はどのように作成すればよいでしょうか? ワーカーが DOM にアクセスできないため、うまくいかないと思いますdocument.createElement('canvas')か、それとも私が見つけたすべての参照が「DOM にアクセスできない」と言っているのを誤解していますか?

4

3 に答える 3

10

Web ワーカーから DOM にアクセスすることはできません。画像を読み込めません。キャンバス要素を作成して Web ワーカーから描画することはできません。今のところ、Web ワーカーは ajax 呼び出しと計算集約型の処理にかなり制限されています。Web ワーカーとキャンバス オブジェクトに関するこの関連する質問/回答: Web ワーカーとキャンバス、および Web ワーカーを使用した画像操作の高速化に関する記事: http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20を参照してください。 /using-web-workers-to-improve-performance-of-image-manipulation.aspx

最も簡単な方法は、作業を小さなチャンク (Web ワーカーなし) にチャンクし、一度にチャンクを実行しsetTimeout()、 を実行してから、次のチャンクの作業を処理することです。これにより、作業を完了しながら UI を応答させることができます。CPU を消費する計算 (画像解析の実行など) がある場合、これを Web ワーカーにファームアウトし、結果をメッセージ経由でメイン スレッドに送り返して DOM に入れることができますが、そうでない場合は、次に、作業を小さなチャンクで実行して、UI を維持します。

画像の読み込み、サーバーからのデータのフェッチなどのタスクの一部は非同期で実行できるため、適切に実行されれば UI の応答性を妨げることはありません。

チャンクの一般的な考え方は次のとおりです。

function doMyWork() {
    // state variables
    // initialize state
    var x, y, z;

    function doChunk() {
        // do a chunk of work
        // updating state variables to represent how much you've done or what remains

        if (more work to do) {
            // schedule the next chunk
            setTimeout(doChunk, 1);
        }

    }
    // start the whole process
    doChunk();
}
于 2013-02-09T07:00:16.353 に答える