Running phantomas against single page applications

macbre / phantomas

Headless Chromium-based web performance metrics collector and monitoring tool

https://www.npmjs.com/package/phantomas

BSD 2-Clause "Simplified" License

2.26k stars 141 forks source link

Running phantomas against single page applications #474

Open macbre opened 9 years ago

macbre commented 9 years ago

@william-p / @gmetais - any suggestions / examples?

measuring transitions between application states
triggering events (from phantomas run) that causes application transition

gmetais commented 9 years ago

Measuring all the metrics while changing from page A to page B sounds definitely interesting to me. I never analyzed webperf on this kind of transition but I'm curious to see the results. Also I don't know any tool able to do it and that's a good enough reason to make it.

SPA can be very CPU consuming on transitions, when new data needs to be transformed into DOM elements that are then rendered with the correct style and bound to events. I guess most of the frameworks do all of this in a single shot (synchronous JS) so it might be possible to measure this CPU time. Probably difficult, but possible.

Not-parallelized ajax calls could be a performance problem too: a first call to the API triggers a second call, which triggers a third call... Don't know if it's a real case though.

I'll try to think of some other possible problems.

gmetais commented 8 years ago

Here are some nice JS snippets that measure some Angular specific metrics: https://github.com/bahmutov/code-snippets#angular-performance (thank you @bahmutov !)

This can be a good starting point for transitions measurements. We probably won't be able to get metrics that work for every JS framework, so being framework specific could be a good solution.

gmetais commented 8 years ago

Last week I saw a great Velocity Conf talk, called "Measuring the performance of SPAs", by @nicjansma and @bluesmoon (hi there!). Both of them are contributors in Boomerang, a RUM tool. They are working on having similar metrics for a SPA.

Slides are here: http://fr.slideshare.net/nicjansma/measuring-the-performance-of-single-page-applications

TL;DR It's not easy. Here is what they do:

listen to page change events sent by the different frameworks,
wrap the XHR methods to capture Ajax metrics
use DOM Observers to detect new images in the DOM and capture onload
add some intelligence to avoid false detections

nicjansma commented 8 years ago

Thanks @gmetais, this is a really cool project that I hadn't heard about before.

The SPA-monitoring code we have is in https://github.com/lognormal/boomerang/pull/68 in plugins/auto_xhr.js. It's rather complex, and is still being tweaked.

Monitoring SPAs is hard!

macbre commented 8 years ago

@gmetais, thanks for the links. I guess one would need to write an app-specific custom module to monitor single page application.