Measuring the Performance of Single Page Applications

MEASURING THE
PERFORMANCE
OF SINGLE PAGE
APPLICATIONS
| | |nic jansma SOASTA nicj.net @nicj
| | |philip tellis SOASTA bluesmoon.info @bluesmoon

SLIDES
slideshare.net/nicjansma/

WHO ARE WE?
Nic Jansma
SOASTA
Philip Tellis
SOASTA

RUM
Real User Monitoring
Gathering performance metrics from real user
experiences
Versus Synthetic Monitoring, with emulated users in a
controlled environment

RUM: HOW IT'S DONE
JavaScript measures the browser's events and
performance interfaces
Listen for readyStatechanges and the onloadevent
Measure DNS, TCP, SSL, Request and Response times
from NavigationTiming and user measurements from
UserTiming (if available)
Gather User Agent characteristics (Version, Screen Size,
etc)
Beacon this data back to the cloud for analytics

BOOMERANG
Created by Philip Tellis @ Yahoo
Gathers performance metrics and characteristics of page
load and beacons data to your server (aka RUM)
Open-source project (with contributions from SOASTA)
https://github.com/lognormal/boomerang/

SPAS
SINGLE PAGE APPS
Run on a single page, dynamically bringing in content as
necessary
Built with frameworks like AngularJS, Ember.js,
Backbone.js, React, etc.

SPAS
HARD VS. SOFT NAVIGATIONS
Hard Navigation: The first page load, which will include
all static HTML, JavaScript, CSS, the SPA framework itself
(e.g. angular.js), plus showing the initial route
Soft Navigation: Any subsequent route (address bar)
change
Any URL might be loaded via either hard or soft navigation

3 CHALLENGES
OF MEASURING THE
PERFORMANCE OF SPAS

CHALLENGE #1
THE ONLOAD EVENT NO LONGER
MATTERS
Traditional websites:
On navigation, the browser begins downloading all of the
JavaScript, CSS, images and other static resources
Once all static resources are fetched, the body's onload
event will fire
This is traditionally what websites consider as page load
complete
This is traditionally what RUM measures

CHALLENGE #1
MATTERS
Single Page Apps:
Load all static content like a traditional website
The frameworks' code will also be fetched (e.g.
angular.js)
(the onload event fires here)
Once the SPA framework is loaded, it starts looking at
routes, fetching views and data
All of this content is fetched after the onloadevent

SPA WATERFALL
Browser fires onloadat 1.225
seconds
All visual resources (.jpgs) aren't
complete until after 1.7 seconds
Filmstrip confirms nothing is
shown until around 1.7 seconds
onloadfired 0.5 seconds too
early!

CHALLENGE #1
MATTERS
Single Page Apps:
Core problem is that most of the interesting stuff (e.g.
fetching images, JavaScript, CSS and XHRs for the route)
happens after the onload
The browser doesn't fire any "fully loaded"-style events
after onload

CHALLENGE #2
SOFT NAVIGATIONS ARE NOT REAL
NAVIGATIONS
Each route change, user interaction, or visual update is
dynamically fetched from the server
There are APIs to change the URL (and detect changes) in
the address bar without actually navigating
New content is dynamically swapped in over the old
content
The browser is no longer doing a traditional navigation,
where it's tearing down the old page

CHALLENGE #2
NAVIGATIONS
This is great for performance
The browser is no longer re-rendering the same header,
footer or common components
The browser is no longer re-parsing the same HTML,
JavaScript and CSS

CHALLENGE #2
NAVIGATIONS
Bad for traditional RUM tools:
Stop caring after the measuring the "one" navigation
Won't run again until the next time it loads on a full
navigation
Browser events (readyState, onload) and metrics
(NavigationTiming) are all geared toward a single load
event

CHALLENGE #3
THE BROWSER WON’T TELL YOU
WHEN ALL RESOURCES HAVE BEEN
DOWNLOADED
The browser fires onloadonly once
The onloadevent helps us know when all static content
was fetched
In a soft navigation scenario, the browser does not fire the
onloadevent again, so we don't know when its content
was fetched

CHALLENGE #3
DOWNLOADED
SPA soft navigations may fetch:
Templates
Images
CSS
JavaScript
XHRs
Videos

CHALLENGE #3
DOWNLOADED
SPA frameworks often fire events around navigations.
AngularJS events:
$routeChangeStart: When a new route is being
navigated to
$viewContentLoaded: Emitted every time the ngView
content is reloaded
But neither of these events have any knowledge of the work
they trigger, fetching new IMGs, CSS, JavaScript, etc!

HOW CAN WE MEASURE
SPA NAVIGATIONS?
We need to figure out at what point the navigation started
(the start event), through when we consider the navigation
complete (the end event).

THE START EVENT
For hard navigations:
The start event is when the browser starts the process of
loading the next page
This is the same time as with traditional web app
navigations
We can use NavigationTiming's navigationStartif
available, to know when the browser navigation began
If NavigationTiming isn't available, and the user is
navigating between pages on the same site, you can use
cookies to measure when the navigation began (see
Boomerang for an implementation)

THE START EVENT
Challenge #2: Soft navigations are not real navigations
We need to figure out when the user's view is going to
significantly change
The browser history is changing
SPA framework routing events can give us an indicator
that the view will be changing
Other important events that might indicate a view change
are a user click, or an XHR that triggers DOM changes

THE START EVENT:
HISTORY STATE
The window.historyobject can tell us when the URL is
changing:
When pushStateor replaceStateare being called, the
app is possibly updating its view
When the user hits Back or Forward, the
window.popstateevent is fired, and the app will
possibly update the view
(future events will give us more info)

THE START EVENT:
ROUTING
SPA frameworks fire routing events when the view is
changing:
AngularJS: $rootScope.$on("$routeChangeStart")
Ember.js: beforeModelor willTransition
Backbone.js: router.on("route")

THE START EVENT: CLICKS
When the user has clicks something, they might be doing
simple interactions (e.g. a drop-down menu)
Or, they might be triggering a UI update

THE START EVENT: XHRS
An XMLHttpRequest(network activity) might indicate
that the page's view is being updated
Or, it could be a periodic poller (e.g. a scoreboard update)
Or, it could be in reaction to a user interaction (e.g.
autocomplete)

THE START EVENT
To determine if a user click or XHR is really triggering a
navigation, we can listen to what happens next
If there was a lot of subsequent network activity, we can
keep on listening for more events
If history (address bar) changed, we can consider the
event the start of a navigation
If the DOM was updated significantly, we can consider the
event the start of a navigation
If nothing else happened, it was probably just an
insignificant interaction

THE END EVENT
When do we consider the SPA navigation complete?
There are many definitions of complete:
When all networking activity has completed
When the UI is visually complete (above-the-fold)
When the user can interact with the page

THE END EVENT
Traditional RUM measures up to the onloadevent:
This is when all resources have been fetched
The page isn't fully loaded until at least then
The UI might have been above-the-fold visually complete
already
It's traditionally when the user can fully interact with the
page

SINGLE POINTS OF
FAILURE (SPOFS)
Which resources could affect visual completion of the page?
External JavaScript files
External CSS files
Media (images, video)

THE END EVENT
For hard navigations, the onloadevent no longer matters
(Challenge #1)
The onloadevent only measures up to when all static
resources were fetched
The SPA framework will be dynamically loading its UI only
after the static JavaScript has been loaded
We want to mark the end of the hard navigation only after
all of the resources were fetched and the UI is complete

THE END EVENT
For soft navigations, the browser won’t tell you when all
resources have been downloaded (Challenge #3)
The onloadonly fires once on a page
APIs like ResourceTiming can give you details about
network resources after they've been fetched
But to know when to stop, we need to know if there are
any outstanding resources
So let's monitor all network activity!

THE END EVENT
Let's make our own SPA onloadevent:
Similar to the body onloadevent, let's wait for all network
activity to complete
This means we will have to intercept both implicit
resource fetches (e.g. from new DOM elements) as well as
programmatic (e.g. XHR) resource fetches

MONITORING XHRS
XMLHttpRequests play an important role in SPA
frameworks
XHRs are used to fetch HTML, templates, JSON, XML, data
and other assets
We should monitor to see if any XHRs are occuring
The XMLHttpRequestobject can be proxied
Intercept the .open()and .send()methods to know
when an XHR is starting

MONITORING XHRS
Simplified code ahead!
Full code at
github.com/lognormal/boomerang/blob/master/plugins/auto_xhr

MONITORING XHRS
varorig_XHR=window.XMLHttpRequest;
window.XMLHttpRequest=function(){
varreq=neworig_XHR();
orig_open=req.open;
orig_send=req.send;
req.open=function(method,url,async){
//saveURLdetails,listenforstatechanges
req.addEventListener("load",function(){...});
req.addEventListener("timeout",function(){...});
req.addEventListener("error",function(){...});
req.addEventListener("abort",function(){...});
orig_open.apply(req,arguments);
};
req.send=function(){
//savestarttime
orig_send.apply(req,arguments);
}
}

MONITORING XHRS
By proxying the XHR code, you can:
Know which URLs are being fetched
Know when a XHR has started
Know when a XHR has completed, timed out, error or
aborted
Measure XHR states even on browsers that don't support
ResourceTiming
Most importantly, know if there are any outstanding
XHRs

MONITORING XHRS
Downsides:
Need additional code to support XDomainRequest
Timing not as accurate when browser is busy (rendering,
etc) as callbacks will be delayed
You can fix-up timing via ResourceTiming (if available)

OTHER RESOURCES
XHR is the main way to fetch resources via JavaScript
What about Images, JavaScript, CSS and other HTML
elements that trigger resource fetches?
We can't proxy the Imageobject as that only works if you
create a new Image()in JavaScript
If only we could listen for DOM changes...

MUTATION OBSERVER
:
http://developer.mozilla.org/en-
US/docs/Web/API/MutationObserver
MutationObserver provides developers a way to react to
changes in a DOM
Usage:
observe()for specific events
Get a callback when mutations for those events occur

MUTATIONOBSERVER
Simplified code ahead!
Full code at
github.com/lognormal/boomerang/blob/master/plugins/auto_xhr

varobserver=newMutationObserver(observeCallback);
observer.observe(document,{
childList:true,
attributes:true,
subtree:true,
attributeFilter:["src","href"]
});

functionobserveCallback(mutations){
varinteresting=false;
if(mutations&&mutations.length){
mutations.forEach(function(mutation){
if(mutation.type==="attributes"){
interesting|=isInteresting(mutation.target);
}elseif(mutation.type==="childList"){
for(vari=0;i<mutation.addedNodes.length;i++){
interesting|=isInteresting(mutation.addedNodes[i]);
}
}
});
}
if(!interesting){
//completetheeventafterNmillisecondsifnothingelsehappens
}
});

MUTATIONOBSERVER
Simplified workflow:
Start listening when an XHR, click, route change or other interesting navigation-like
event starts
Use MutationObserverto listen for DOM mutations
Attach loadand errorevent handlers and set timeouts on any IMG, SCRIPT, LINK
or FRAME
If an interesting element starts fetching keep the navigation "open" until it completes
After the last element's resource has been fetched, wait a few milliseconds to see if it
kicked off anything else
If not, the navigation completed when the last element's resource was fetched

MUTATIONOBSERVER
What's interesting to observe?
Internal and cached resources may not fetch anything, so
you have to inspect elements first
IMGelements that haven't already been fetched
(naturalWidth==0), have external URLs (e.g. not data-
uri:) and that we haven't seen before.
SCRIPTelements that have a srcset
IFRAMEselements that don't have javascript:or
about:protocols
LINKelements that have a hrefset

MUTATIONOBSERVER
Downsides:
Not 100% supported in today's market
Can't be used to monitor all resources (e.g. fonts from
CSS)

MUTATIONOBSERVER
Polyfills (with performance implications):
github.com/webcomponents/webcomponentsjs
github.com/megawac/MutationObserver.js

WHY NOT
RESOURCETIMING?
Doesn't ResourceTiminghave all of the data we need?
ResourceTiming events are only added to the buffer after
they complete
In order to extend the SPA navigation end time, we have
to know if any resource fetches are outstanding

MUTATIONOBSERVER
Polyfill ResourceTiming via MutationObserver
For extra credit, you could use the data you gathered with
Mutation Observer to create a Waterfall for browsers that
don't support ResourceTiming but do support
MutationObserver (e.g. iOS).

MUTATIONOBSERVER
Polyfill ResourceTiming via MutationObserver

FRONT-END VS. BACK-
END
In a traditional page load:

FRONT-END VS. BACK-
END
Traditional websites:
Back-End: HTML fetch start to HTML response start
Front-End: Total Time - Back-End

FRONT-END VS. BACK-
END
Single Page Apps:
Depends on your application's patterns, but...
Back-End: Any timeslice with an XHR outstanding
Front-End: Total Time - Back-End

MONITORING PAGE
COMPONENTS
It's not just about navigations
What about components, widgets and ads?
You can apply the previous techniques to page components
For measuring performance, you need a start time and an end time
The start time is probably driven by your code (e.g. a XHR fetch) or a user
interaction (e.g. a click)
The end time can be measured via XHR interception, MutationObservers,
or callbacks from your resource fetches

MONITORING PAGE
COMPONENTS
How do you measure visual completion?
Challenges:
When an IMGhas been fetched, that's not when it's
displayed to the visitor (it has to decode, etc.)
When you put HTML into the DOM, it's not immediately on
the screen

MONITORING PAGE
COMPONENTS
Use setTimeout(..., 0)or setImmediateto get a
callback after the browser has finished parsing some DOM
updates
varxhr=newXMLHttpRequest();
xhr.open("GET","/fetchstuff");
xhr.addEventListener("load",function(){
$(document.body).html(xhr.responseText);
setTimeout(function(){
varendTime=Date.now();
varduration=endTime-startTime;
},0);
});
varstartTime=Date.now();
xhr.send();

MONITORING PAGE
COMPONENTS
This isn't perfect:
The browser may be doing layout, rendering or drawing
async or on another thread
But it's better than ignoring all the work the browser has
to do to render DOM changes

LIFECYCLE
What happens over time?
How well does your app behave?

LIFECYCLE
It's not just about measuring interactions or how long
components take to load
Tracking metrics over time can highlight performance,
reliability and resource issues

LIFECYCLE
You could measure:
Memory usage: window.performance.memory
(Chrome)
DOM Length:
document.documentElement.innerHTML.length
DOM Nodes:
document.getElementsByTagName("*").length
JavaScript errors: window.onerror
Bytes fetched: ResourceTiming2or XHRs
Frame rate: requestAnimationFrame

THE FUTURE!
OK, that sounded like a lot of work-arounds to measure
Single Page Apps.
Yep.
Why can't the browser just tell give us performance data for
SPAs in a better, more performant way?

LISTENING FOR
RESOURCE FETCHES
Instead of instrumenting XMLHttpRequestand using
MutationObserverto find new elements that will fetch:
W3C Fetch standard
A Fetch Observer
( ) that notifies
us when a resource fetch starts/stops
Less overhead than MutationObserver
Tracks all resources rather than just DOM elements from
MutationObserver
https://fetch.spec.whatwg.org/
https://github.com/whatwg/fetch/issues/65

THANKS!
- -slideshare.net/nicjansma/ @nicj @bluesmoon
soasta.io/SPAperfbook

Measuring the Performance of Single Page Applications

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Measuring the Performance of Single Page Applications (20)

More from Nicholas Jansma (6)

Recently uploaded (20)

Measuring the Performance of Single Page Applications