Web Workerの使い方

「Web Worker」の使い方をまとめました。

1. Web Worker

「Web Worker」は、JavaScriptでバックグラウンド処理を実行する機能です。

2. Web Workerの使い方

・worker.js
バックグラウンド処理は独立スレッドで実行するので、個別ファイルに記述します。

// バックグラウンド処理
self.onmessage = function(e) {
    // 引数の取得
    let param = e.data
    
    // ここで重い処理を実行 (2)
    
    // 結果を返す
    self.postMessage(param)
}

・index.js
バックグラウンド処理を呼び出すスクリプトでは、ワーカーを生成し、バックグラウンド処理の結果取得のコールバックを追加してから、バックグラウンド処理を呼び出します。

// ワーカーの生成
const worker = new Worker('worker.js')

// バックグラウンド処理の結果取得
worker.onmessage = function (e) {
    // 結果表示
    console.log('result: ', e.data) // (3)
}

// バックグラウンド処理の呼び出し
worker.postMessage('TEST') // (1)

「worker.js」はimportの必要はなく、非同期に読み込まれます。

3. Web Workerからアクセスできる機能、できない機能

「Web Worker」からアクセスできる機能は、次のとおりです。

・navigator
・location (読み取りのみ)
・XMLHttpRequest
・setTimeout()・clearTimeout()・setInterval()・clearInterval()
・importScripts()
・Application Cache
・Web Workerの生成

「Web Worker」からアクセスできない機能は、次のとおりです。

・DOM
・window
・document
・parent

4. inline-worker

「inline-worker」を使うことで、バックグラウンド処理を別ファイルで分けず1つのファイルで記述することができます。

mohayonao/inline-worker

◎ インストール

$ npm install inline-worker

◎ API

constructor(func: function, [ self: object ]): Worker | InlineWorker

◎ サンプル

// ワーカーの生成
const InlineWorker = require("inline-worker");
let self = {};
let worker = new InlineWorker(function(self) {
    // バックグラウンド処理
    self.onmessage = function(e) {
        // 引数の取得
        let param = e.data
    
        // ここで重い処理を実行 (2)
    
        // 結果を返す
        self.postMessage(param)
    };
}, self);

// バックグラウンド処理の結果取得
worker.onmessage = function(e) {
    // 結果表示
    console.log('result: ', e.data) // (3)
};

// バックグラウンド処理の呼び出し
worker.postMessage("hello"); // (1)