macbre / phantomas

Headless Chromium-based web performance metrics collector and monitoring tool
https://www.npmjs.com/package/phantomas
BSD 2-Clause "Simplified" License
2.25k stars 141 forks source link

Running multiple phantomas return same values #546

Closed fizerkhan closed 9 years ago

fizerkhan commented 9 years ago

We are running multiple URLs by async.each to get report of them. Even though i get the results, results has same value in count and size

I tried to bing.com and google.com using async.each. I am getting following values

http://bing.com/
{ requests: 26,
  gzipRequests: 0,
  postRequests: 0,
  httpsRequests: 2,
  notFound: 0,
  bodySize: 17549,
  contentLength: 533538,
  httpTrafficCompleted: 7421,
  timeToFirstByte: 284,
  timeToLastByte: 573,
  ajaxRequests: 0,
  htmlCount: 4,
  htmlSize: 60549,
  cssCount: 0,
  cssSize: 0,
  jsCount: 12,
  jsSize: 99436,
  jsonCount: 1,
  jsonSize: 1000,
  imageCount: 7,
  imageSize: 372553,
  videoCount: 0,
  videoSize: 0,
  webfontCount: 0,
  webfontSize: 0,
  base64Count: 1,
  base64Size: 42,
  otherCount: 2,
  otherSize: 0,
  cacheHits: 0,
  cacheMisses: 0,
  cachePasses: 0,
  cachingNotSpecified: 0,
  cachingTooShort: 0,
  cachingDisabled: 3,
  oldCachingHeaders: 10,
  consoleMessages: 0,
  cookiesSent: 0,
  cookiesRecv: 1260,
  domainsWithCookies: 5,
  documentCookiesLength: 305,
  documentCookiesCount: 10,
  documentHeight: 768,
  commentsSize: 0,
  whiteSpacesSize: 0,
  DOMelementsCount: 184,
  DOMelementMaxDepth: 15,
  nodesWithInlineCSS: 14,
  imagesScaledDown: 0,
  imagesWithoutDimensions: 1,
  DOMidDuplicated: 0,
  hiddenContentSize: 42867,
  DOMmutationsInserts: 0,
  DOMmutationsRemoves: 0,
  DOMmutationsAttributes: 0,
  DOMqueries: 105,
  DOMqueriesWithoutResults: 25,
  DOMqueriesById: 70,
  DOMqueriesByClassName: 0,
  DOMqueriesByTagName: 0,
  DOMqueriesByQuerySelectorAll: 35,
  DOMinserts: 20,
  DOMqueriesDuplicated: 10,
  DOMqueriesAvoidable: 21,
  domains: 5,
  maxRequestsPerDomain: 22,
  medianRequestsPerDomain: 1,
  eventsBound: 92,
  eventsDispatched: 0,
  eventsScrollBound: 2,
  globalVariables: 104,
  globalVariablesFalsy: 4,
  documentWriteCalls: 0,
  evalCalls: 0,
  jsErrors: 0,
  closedConnections: 0,
  lazyLoadableImagesBelowTheFold: 0,
  localStorageEntries: 0,
  redirects: 3,
  redirectsTime: 2804,
  repaints: 0,
  firstPaint: 0,
  requestsToFirstPaint: 0,
  domainsToFirstPaint: 0,
  requestsToDomContentLoaded: 2,
  domainsToDomContentLoaded: 2,
  requestsToDomComplete: 3,
  domainsToDomComplete: 2,
  assetsNotGzipped: 16,
  assetsWithQueryString: 7,
  assetsWithCookies: 19,
  smallImages: 3,
  smallCssFiles: 0,
  smallJsFiles: 6,
  multipleRequests: 4,
  timeToFirstCss: 0,
  timeToFirstJs: 1095,
  timeToFirstImage: 932,
  domInteractive: 853,
  domContentLoaded: 853,
  domContentLoadedEnd: 855,
  domComplete: 953,
  timeBackend: 23,
  timeFrontend: 77,
  statusCodesTrail: '301,200',
  windowAlerts: 0,
  windowConfirms: 0,
  windowPrompts: 0,
  bodyHTMLSize: 52523,
 }

http://google.com/
{ requests: 27,
  gzipRequests: 0,
  postRequests: 1,
  httpsRequests: 2,
  notFound: 0,
  bodySize: 17550,
  contentLength: 533539,
  httpTrafficCompleted: 9081,
  timeToFirstByte: 269,
  timeToLastByte: 558,
  ajaxRequests: 0,
  htmlCount: 4,
  htmlSize: 60549,
  cssCount: 0,
  cssSize: 0,
  jsCount: 12,
  jsSize: 99436,
  jsonCount: 1,
  jsonSize: 1000,
  imageCount: 7,
  imageSize: 372553,
  videoCount: 0,
  videoSize: 0,
  webfontCount: 0,
  webfontSize: 0,
  base64Count: 1,
  base64Size: 42,
  otherCount: 3,
  otherSize: 1,
  cacheHits: 0,
  cacheMisses: 0,
  cachePasses: 0,
  cachingNotSpecified: 0,
  cachingTooShort: 0,
  cachingDisabled: 3,
  oldCachingHeaders: 10,
  consoleMessages: 0,
  cookiesSent: 0,
  cookiesRecv: 1260,
  domainsWithCookies: 5,
  documentCookiesLength: 305,
  documentCookiesCount: 10,
  documentHeight: 768,
  commentsSize: 0,
  whiteSpacesSize: 0,
  DOMelementsCount: 184,
  DOMelementMaxDepth: 15,
  nodesWithInlineCSS: 14,
  imagesScaledDown: 0,
  imagesWithoutDimensions: 1,
  DOMidDuplicated: 0,
  hiddenContentSize: 42867,
  DOMmutationsInserts: 0,
  DOMmutationsRemoves: 0,
  DOMmutationsAttributes: 0,
  DOMqueries: 127,
  DOMqueriesWithoutResults: 31,
  DOMqueriesById: 70,
  DOMqueriesByClassName: 0,
  DOMqueriesByTagName: 0,
  DOMqueriesByQuerySelectorAll: 57,
  DOMinserts: 20,
  DOMqueriesDuplicated: 32,
  DOMqueriesAvoidable: 43,
  domains: 5,
  maxRequestsPerDomain: 23,
  medianRequestsPerDomain: 1,
  eventsBound: 92,
  eventsDispatched: 0,
  eventsScrollBound: 2,
  globalVariables: 104,
  globalVariablesFalsy: 4,
  evalCalls: 0,
  jsErrors: 0,
}

Take a look at values of htmlCount, htmlSize, cssCount, cssSize, jsCount, jsSize, imageCount, imageSize. They have same values.

macbre commented 9 years ago

Can you provide the code that gives you these results? What makes this even more strange is the fact that there are less metrics in the results for http://google.com/ (jsErrors is the last one).

fizerkhan commented 9 years ago

@macbre This is the code that i used.

var urls = [ 'http://ping.com', 'http://google.com'];
require('async').mapSeries(urls, function(urlString, cb) {
    require('phantomas')(urlString, {}, function(err, json, results) {
        cb(err, json && json.metrics);
    });
}, function(err, results) {

    if (err) {
        console.error('Error in processing url', err);
        return;
    }

    console.log(results);
});

Sorry, i removed some metrics from above result to improve the visibility.

macbre commented 9 years ago

The code above works for me (I'm on devel branch, removed most of the metrics below just to give the comparison):

[ [ 'http://bing.com',
    { requests: 24,
      gzipRequests: 0,
      postRequests: 0,
      httpsRequests: 0,
      notFound: 0,
      bodySize: 35354,
      contentLength: 525032,
      httpTrafficCompleted: 1782,
      timeToFirstByte: 244,
      timeToLastByte: 340,
      ajaxRequests: 0,
      htmlCount: 2,
      htmlSize: 59807,
      cssCount: 0,
      cssSize: 0,
      jsCount: 13,
      jsSize: 97697,
      jsonCount: 1,
      jsonSize: 711,
      imageCount: 7,
      imageSize: 366817,
      videoCount: 0,
      videoSize: 0,
      webfontCount: 0,
      webfontSize: 0} ],
  [ 'http://google.com',
    { requests: 10,
      gzipRequests: 0,
      postRequests: 0,
      httpsRequests: 0,
      notFound: 0,
      bodySize: 18749,
      contentLength: 66666,
      httpTrafficCompleted: 431,
      timeToFirstByte: 105,
      timeToLastByte: 134,
      ajaxRequests: 0,
      htmlCount: 3,
      htmlSize: 3753,
      cssCount: 0,
      cssSize: 0,
      jsCount: 1,
      jsSize: 2463,
      jsonCount: 0,
      jsonSize: 0,
      imageCount: 5,
      imageSize: 60450,
      videoCount: 0,
      videoSize: 0,
      webfontCount: 0,
      webfontSize: 0} ] ]
fizerkhan commented 9 years ago

Finally i found the reason for weird behaviour. I don't know this is a bug. As you said, above code works for me too. But in my case, i just abstracted the phantomas option above the async call. This does not work.

Following code does not work.

var phantomasOption = { };
var urls = [ 'http://ping.com', 'http://google.com'];
require('async').mapSeries(urls, function(urlString, cb) {
    // Please note that i uses abstracted phantomas option
    require('phantomas')(urlString, phantomasOption, function(err, json, results) {
        cb(err, json && json.metrics);
    });
}, function(err, results) {

    if (err) {
        console.error('Error in processing url', err);
        return;
    }

    console.log(results);
});

If i moved phantomas option inside the callback, everything works fine

var urls = [ 'http://ping.com', 'http://google.com'];
require('async').mapSeries(urls, function(urlString, cb) {
    // Please note that i moved phantomas option inside the callback.
    var phantomasOption = { };
    require('phantomas')(urlString, phantomasOption, function(err, json, results) {
        cb(err, json && json.metrics);
    });
}, function(err, results) {

    if (err) {
        console.error('Error in processing url', err);
        return;
    }
    console.log(results);
});