Skip to content

Instantly share code, notes, and snippets.

Last active Dec 17, 2018
What would you like to do?
Navigation Timing, Headless Chrome, Docker
FROM node:8.7.0-slim
RUN apt-get update && \
apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
RUN npm i puppeteer micro qs
RUN echo "\
const { parse } = require('qs')\n\
const { send } = require('micro')\n\
const puppeteer = require('puppeteer')\n\
module.exports = async (req, res) => {\n\
async function timings (url) {\n\
const browser = await puppeteer.launch({\n\
// ommmmm\n\
args: ['--disable-setuid-sandbox', '--no-sandbox']\n\
const page = await browser.newPage()\n\
await page.goto(url)\n\
const t = await page.evaluate(() => {\n\
return window.performance.timing\n\
await browser.close()\n\
return t\n\
let url = req.url\n\
const index = url.indexOf('?')\n\
if (index !== -1) {\n\
url = url.substr(index + 1)\n\
const query = parse(url)\n\
const t = await timings(query.url)\n\
return t\n\
" > index.js
CMD ["node_modules/.bin/micro", "index.js"]

This comment has been minimized.

Copy link
Owner Author

@daliborgogic daliborgogic commented Oct 23, 2017

Navigation Timing

Identify where your application is spending its time Live Demo

# build
docker build -t [image_name] .
# run
docker run -d --name [container_name] [image_name]

If you send a GET request to e.g. /?url= you will get back an object:

  "navigationStart": 1508774410579,
  "unloadEventStart": 0,
  "unloadEventEnd": 0,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 1508774410580,
  "domainLookupStart": 1508774410581,
  "domainLookupEnd": 1508774410596,
  "connectStart": 1508774410596,
  "connectEnd": 1508774410852,
  "secureConnectionStart": 1508774410712,
  "requestStart": 1508774410852,
  "responseStart": 1508774411015,
  "responseEnd": 1508774411131,
  "domLoading": 1508774411024,
  "domInteractive": 1508774411837,
  "domContentLoadedEventStart": 1508774411837,
  "domContentLoadedEventEnd": 1508774411839,
  "domComplete": 1508774413498,
  "loadEventStart": 1508774413498,
  "loadEventEnd": 1508774413502

Total time from start to load: loadEventEnd - fetchStart
Time spent constructing the DOM tree: domComplete - domInteractive
Time consumed preparing the new page: fetchStart - navigationStart
Time spent during redirection: redirectEnd - redirectStart
AppCache time: unloadEventEnd - unloadEventStart
Time spent unloading documents: domainLookupStart - fetchStart
DNS query time: domainLookupEnd - domainLookupStart
TCP connection time: connectEnd - connectStart
Time spent during the request: responseEnd - requestStart
Request to completion of the DOM loading: domInteractive - responseEnd
Load event time: loadEventEnd - loadEventStart
Render Time: domComplete - domLoading


This comment has been minimized.

Copy link

@zb010 zb010 commented Dec 17, 2018

I really like this project, it's exactly what I need. But somehow I'm only getting empty responses

Run from the server (outside the container:)


The container is running at>3000/tcp

Do you have some tips to make this running?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment