node.jsのpuppeteerで並列？処理する方法

Question

node.jsのpuppeteerモジュールの練習で、複数のURLのスクリーンショットを保存していくようなコードを書いているのですが、ブラウザを起動するためのpuppeteer.launch()がとても遅いので、並列で行いたいのですが、nodeでのやり方がわかりません。

const pp = require("puppeteer");
const uuid = require("node-uuid");

const urls = [
    "url0",
    "url1",
    "url2"
]

async function getScreenshot(url) {
    const browser = await pp.launch();
    let page = await browser.newPage();
    await page.goto(url);
    await page.screenshot({
        path: `${uuid.v4()}.png`,
        fullpage: true
    });
    browser.close();
}

(async () => {
    for (let url of urls) {
        await getScreenshot(url);
    }
})();

上記のコードだと順次処理です。

node.jsの特徴としてシングルスレッドが紹介されている記事をよく見るので、並列化はできないのでしょうか？

よろしくお願いします。

Comments

[karamarimo]

browserを１つにして共用するのはだめなのでしょうか？

[kurosuke___]

ひとつにしたのですが、あんまり速くなかったのでブラウザ起動が遅いわけじゃなかったようです。

Answer 1

GitHubのPage.jsを見に行くと、
817行目にcloseメソッドが用意されていますね。

ブラウザを消して立ち上げるのではなく、1ページ毎に立ち上げて操作という風にしてみてはどうでしょう？
ちょっと下のコードに修正して動かしてみてください。

const pp = require("puppeteer");
const uuid = require("node-uuid");

const urls = [
    "url0",
    "url1",
    "url2"
]

const getScreenshot = async (browser, url) => {
    let page = await browser.newPage();
    await page.goto(url);
    await page.screenshot({
        path: `${uuid.v4()}.png`,
        fullpage: true
    });
    await page.close();
}

(async () => {
    const browser = await pp.launch();
    for (const url of urls) {
        await getScreenshot(browser, url);
    }
    browser.close();
})()

---

おまけ: 並列っぽく操作していく

これだと逐次処理なのでそこそこ速くはなったかと思いますが、
もっと速度が欲しいかもしれません。

そういう時は2通りの手段があります。
(やってることはどちらも同じです)

• 動作の発火とawaitを分ける
• Promise.allを使う

動作の発火とawaitを分ける場合のコードはこうなります。
即時実行関数以外は同じなので省いておきます。

(async () => {
    const browser = await pp.launch();
    cosnt promises = [];
    for (const url of urls) {
        promises.push(getScreenshot(browser, url));
    }
    for (const promise of promises) {
        await promise;
    }
    browser.close();
})()

Promise.allを使う手法はこんな感じです。

(async () => {
    const browser = await pp.launch();
    await Promise.all(
        urls.map(url => getScreenshot(browser, url))
    );
    browser.close();
})()

Comments

[kurosuke___]

回答ありがとございます！
おまけでご紹介いただいた方法を試してみたいと思います。

このようにすると何故並列っぽくなるのかが理解出来ていないので、Promiseとasync/awaitをもっと勉強してきます。

[miyabi-sun]

ざっくり説明すると、Promiseというのは「今実行中だよ」オブジェクトなのです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
> pending, fulfilled, rejected
この3状態ですね。

promise内で`resolve(value)`が叩かれた時点で状態がpending -> fulfilledに変化。
それと同時にthenに繋いだコールバック関数を発火します。

失敗すれば`reject(err)`が実行され、状態がpending -> rejectedに変化。
それと同時にcatchに繋いだコールバック関数を発火します。

async / awaitというのは糖衣構文です。
asyncで包まれた関数は内部をどう書こうが、絶対に`new Promise(fn)`を返します。
awaitは実行中のPromiseをひたすら見張る構文で、pending -> fulfilledに変化するまで一生待ち続けます。

従って、まず一度pending中のPromiseを全部作ってしまうのがうまいやり方で、
Promiseを返させた時点で裏で実行し続けているわけですね。
各Promiseは各々が勝手に処理を完了させ、まばらにfulfilledを返し始めます。

後からそれぞれがfulfilledになるのを待つという事をしたのがおまけのコードです。
Promise.allは引数の配列全てがPromiseである必要があり、
その配列の中身のPromise全てを見張り、全てがfulfilledになったら自分がfulfilledになるという挙動をします。
for文+awaitで各Promiseを1個ずつawaitで待っても同様の事が実現可能です。

もしこの説明で分からなくても、Promiseやasync / awaitを見に行けば理解が進むかと思います。
がんばって下さいね

[kurosuke___]

なるほど・・・
mapで一括で作ったpending状態のPromiseの配列を一括でawaitしてるんですね。
asyncで包んだ関数をmapの処理やforで回しおわった状態が「並列っぽく」処理している状態で、待ってあげないとプログラムが終了しちゃうからawaitで待っているという感じですかね。
使い方に慣れるの大変そうですが、すごく便利なので頑張って勉強してみます！
わかりやすい説明ありがとうございました！

[miyabi-sun]

質問文のコードの時点で只者ではないとは思ってましたが、
この説明で分かるとは流石の理解力ですね。

勉強頑張ってください！