goto is slow when loading webgl heavy page within docker

Hi all,

I’m running puppeteer in a docker container following the guidance in the troubleshooting doc. Everything works well but I’ve noticed that the performance of loading a webgl heavy page is quite slow. In my specific case, I am loading a page which runs mapbox-gl.

To highlight the difference here are some timings of running page.goto on my macbook and then in a docker container on my macbook.

node src/index.js on my macbook:

https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 3063.949ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4452.650ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4230.794ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2490.617ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2317.874ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4229.287ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2354.100ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2327.328ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2322.225ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 2327.917ms

docker build -t mapbox_puppeteer . && docker run mapbox_puppeteer on my macbook:

https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 6463.545ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 5926.895ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 5821.330ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4994.213ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 5873.299ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4991.777ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4994.862ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 5883.109ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 4992.620ms
https://www.mapbox.com/mapbox-gl-js/example/simple-map/: 5966.262ms

Taking a look at a trace from both scenarios shows that within docker a lot more time is spent Scripting:

Running node on my macbook:

Running inside Docker on my macbook:

Perhaps this is an issue with the chrome distribution thats installed in docker? Or maybe this is an issue with docker itself not fully leveraging my GPU? FWIW I also have access to a kubernetes cluster running nodes with 1x NVIDIA Tesla K80… but the performance issue remains.

Looking for some guidance here.

For reference, here is my code:

src/index.js

const puppeteer = require('puppeteer');
const PUPPETEER_EXECUTABLE_PATH = process.env.PUPPETEER_EXECUTABLE_PATH;

const PUPPETEER_BASE_ARGS = {
  headless: false, // headless doesn't support webGL
  args: [
    '--headless',
    '--hide-scrollbars',
    '--mute-audio',
    '--no-sandbox',
    '--disable-dev-shm-usage', // https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#tips
  ],
};


(async () => {
  const browser = await puppeteer.launch({
    executablePath: PUPPETEER_EXECUTABLE_PATH,
    ...PUPPETEER_BASE_ARGS,
  });
  const url = 'https://www.mapbox.com/mapbox-gl-js/example/simple-map/';
  for (let i = 0; i < 10; i++) {
    const page = await browser.newPage();
    try {
      console.time(url);
      await page.goto(url, {
        timeout: 20000,
        waitUntil: 'networkidle0',
      });
      console.timeEnd(url);
    } finally {
      await page.close();
    }
  }

  // create a trace
  // const page = await browser.newPage();
  // await page.tracing.start({ path: 'trace.json' });
  // await page.goto(url, {
  //   timeout: 20000,
  //   waitUntil: 'networkidle0',
  // });
  // await page.tracing.stop();

  await browser.close();
})();

Dockerfile

FROM node:9-slim

# For more info on this Dockerfile see:
# https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

# See https://crbug.com/795759
RUN apt-get update && apt-get install -yq libgconf-2-4

# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
# installs, work.
RUN apt-get update && apt-get install -y wget --no-install-recommends \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst ttf-freefont \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/* \
    && apt-get purge --auto-remove -y curl \
    && rm -rf /src/*.deb

# It's a good idea to use dumb-init to help prevent zombie chrome processes.
ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.0/dumb-init_1.2.0_amd64 /usr/local/bin/dumb-init
RUN chmod +x /usr/local/bin/dumb-init

RUN mkdir -p /app/

# Add user so we don't need --no-sandbox.
RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /app

# force docker to cachebust all app specific commands
ARG CACHEBUST=1
COPY . /app/
WORKDIR app

# skip chromium download when installing puppeteer
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
ENV PUPPETEER_EXECUTABLE_PATH google-chrome-unstable

# cachebust when doing yarn install so we can update dependencies in package.json
RUN yarn install

# Run everything after as non-privileged user.
USER pptruser

EXPOSE 8080

ENTRYPOINT ["dumb-init", "--"]
CMD ["node", "src/index.js"]

Thanks!

[ebidel]

I’m not sure the host GPU is available inside the container. A little googling suggests you need to set this up yourself:

https://medium.com/@ceshine/docker-nvidia-gpu-nvidia-docker-808b23e1657 https://github.com/SeleniumHQ/docker-selenium/issues/340#issuecomment-279800757

[reyapr]

same to me, i use puppeteer with jest, i run in my locally it pass in 17s for 1 login test, but in docker it failed and gave error

Timeout - Async callback was not invoked within the 30000ms timeout specified by jest.setTimeout.

with 63s times