Making Front End performance a part of Continuous Integration. This document has more details on the tools Browserperf and perfjankie which is on GIT.

1. MAKING FEP TESTING
…..A PART OF CONTINUOUS INTEGRATION
(BROWSER-PERF/PERFJANKIE DETAILS)

2. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
2
Contents
OBJECTIVE.................................................................................................................................................................................. 3
BROWSER-PERF INTRODUCTION................................................................................................................................... 4
BROWSER-PERF METRICS.................................................................................................................................................. 5
1) CHROME TIMELINE METRICS....................................................................................................................................... 5
2) CHROME TRACING METRICS ........................................................................................................................................ 6
3) REQUEST ANIMATION FRAME METRICS .................................................................................................................... 6
4) RUNTIME PERFMETRICS............................................................................................................................................... 6
5) NAVTIMINGMETRICS..................................................................................................................................................... 7
BROWSER-PERF METRICS FOR XYZ ............................................................................................................................... 9
APPROACH TO INSTALL/INCORPORATE BROWSER-PERF/PERF-JANKIE..................................................10
1) TOTAL INSTALLATIONS REQUIRED............................................................................................................................10
2) STEPS FOR INSTALLATION ..........................................................................................................................................10
3) CONFIGURATION OPTIONS FOR PERF-JANKIE IN GRUNTJS...................................................................................10
REFERENCES...........................................................................................................................................................................13

3. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
3
Objective
This document intends to further the initial document for the technologies –
Browser-Perf and Perf-Jankie
This document will list the various performance metrics; segregate the ones required for the Site
Dev projects and will have a basic to-do to start the process.

4. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
4
Browser-perf Introduction
http://nparashuram.com/perfslides/#presentation&10
Install browser-Perf from (NPM)
Run it from the (CMD) or add it to a CI system
like (Jenkins)
 Browser-perf is a NodeJS based tool
 For measuring browser performance metrics (like layout, paint, dom load or frame times)
 For Web pages, Cordova/Phonegap and other Hybrid applications.
 Metrics are measured when scrolling the web page, or during a Checkout workflow defined
using Selenium.
 Tool collects the metrics from sources like about:tracing, Chrome Devtools timeline, IE UI
Responsiveness tab, Xperf, etc.
 Monitor this information regularly by integrating the tool with continuous integration
systems.
https://github.com/axemclion/browser-perf
Screenshots for Browser-perf
From https://gist.github.com/axemclion/8620794

5. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
5
Browser-Perf Metrics
1) Chrome Timeline Metrics
Name Unit Description
CompositeLayers ms
The time spent compositing rendering layers into a
screen image
DecodeImage ms The time spent decoding images
EvaluateScript ms The time spent evaluating the page's scripts
EventDispatch ms The time spent executing event handlers
FireAnimationFrame ms
The time spent handling scheduled animation frame
events
FunctionCall ms
The time spent executing calls to top-level Javascript
functions
GCEvent ms
The time spent doing garbage collection during script
execution
Layout ms
The time spent on (re)flow, or constructing the
rendering tree from the DOM tree
Paint ms The time spent rasterizing the page into bitmaps
PaintSetup ms
The time spent converting DOM elements into a
display list of drawing commands to paint
ParseHTML ms
The time spent executing the engine's HTML parsing
algorithm
Program ms The total time for all actions to render the page
RecalculateStyles ms
The time spent recalculating element styling, when a
reflow occurs
TimerFire ms The time spent executing timer-triggered handlers
XHRReadyStateChange ms
The time spent handling handling changes to the
ready state of XMLHTTPRequest's

6. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
6
2) Chrome Tracing Metrics
Name Unit Description
Mean Frame Time ms Average time taken to render each frame
3) Request Animation Frame Metrics
Name Unit Description
droppedFrameCount count
The number of frames produced by the GPU were
over 16.6ms apart
numFramesSentToScreen count The number of frames the GPU sent to the screen
numAnimationFrames count
Total number of times requestAnimationFrame
was called
4) Runtime PerfMetrics
Name Unit Description
ExpensiveEventHandlers count
The number of event handlers that took more
than 16ms
ExpensivePaints count The number of paints that took more than 16ms
GCInsideAnimation count
The number of times Garbage was called during
the scroll
Layers count The number of layers used for rendering
NodePerLayout count
The number of nodes that need to be updated
during layout
PaintedArea sq.pixels The amount of space painted during paints

7. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
7
5) NavTimingMetrics
These are calculated from window.performance.timing API in NavTimingMetrics. For more
information about each metric, please the W3C Specification
Each of these numbers in the metrics indicates the time elapsed after the previous event.
The order of the event flow is
Name Unit Description
connectStart ms
The time immediately before the user agent
started establishing the connection to the
server to retrieve the document
connectEnd ms
The time immediately after the user agent
finished establishing the connection to the
server to retrieve the document
domComplete ms
The time immediately before the user agent set
the document's readiness to complete
domContentLoadedEventStart ms The time immediately before the user agent

8. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
8
Name Unit Description
fired the DOMContentLoaded event
domContentLoadedEventEnd ms
The time immediately after the document's
DOMContentLoaded event completed
domInteractive ms
The time immediately before the user agent set
the document's readiness to interactive
domLoading ms
The time immediately before the user agent set
the document's readiness to loading
domainLookupStart ms
The time immediately before the user agent
started the domain name lookup for the
document
domainLookupEnd ms
The time immediately after the user agent
finishes the domain name lookup for the
document
fetchStart ms
The time immediately before the user agent
checks caches for resources OR starts fetching
resources
firstPaint ms
The time immediately before the first paint
occurred
loadEventStart ms
The time immediately before the load event
was fired for the document
loadEventEnd ms
The time the load event for the document
completed
requestStart ms
The time immediately before the user agent
started requesting the document from the
server
responseStart ms
The time immediately after the user agent
received the first byte of the server's response
to the document request

9. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
9
Browser-perf metrics for XYZ
Weekly Build Daily Build Dev build
Chrome Timeline Metrics
CompositeLayers
DecodeImage
EvaluateScript  
EventDispatch  
FireAnimationFrame
FunctionCall
GCEvent  
Layout   
Paint
PaintSetup
ParseHTML   
Program
RecalculateStyles   
TimerFire
XHRReadyStateChange   
Chrome Tracing Metrics
Mean Frame Time
Request Animation Frame Metrics
droppedFrameCount
numFramesSentToScreen
numAnimationFrames
Runtime PerfMetrics
ExpensiveEventHandlers  
ExpensivePaints
GCInsideAnimation
Layers
NodePerLayout  
PaintedArea
NavTimingMetrics
connectStart
connectEnd
domComplete   
domContentLoadedEventStart
domContentLoadedEventEnd
domInteractive   
domLoading
domainLookupStart
domainLookupEnd
fetchStart  
firstPaint  
loadEventStart
loadEventEnd   
requestStart
responseStart   

10. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
10
Approach to install/incorporate Browser-Perf/Perf-Jankie
1) Total installations required
a. Browser-perf
b. Perf-jankir
c. Selenium
d. Selenium Drivers for Chrome
e. Selenium Drivers for IE
Note: Selenium comes with Safari and Firefox drivers built-in.
2) Steps for Installation
a. Click here for the step by step Instructions for browser-perf/Selenium and the
Selenium drivers
b. Perfjankie can be used as a node module, from the command line, or as a Grunt
task and can be installed from npm using,
npm install perfjankie
(https://github.com/axemclion/perfjankie)
3) Configuration options for Perf-Jankie in GruntJS
Click here for all the list of options
Here below is an example of a GruntJS configuration Option for PerfJankie

11. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
11
perfjankie: {
options: {
suite: 'perfSlides - Performance Analysis',
urls: ['http://localhost:8080']
},
local: {
options: {
selenium: 'http://localhost:4444/wd/hub',
browsers: 'chrome',
couch: {
server: 'http://localhost:5984',
username: 'admin_user',
pwd: 'admin_pass',
database: 'perfslides',
updateSite: true
}
}
},
remote: {
options: {
repeat: 3,
selenium: {
hostname: "ondemand.saucelabs.com",
port: "80",
user: process.env.SAUCE_USERNAME,
pwd: process.env.SAUCE_ACCESSKEY
},
browsers: [{
browserName: 'chrome',
version: 34
}],
couch: {
server: 'http://axemclion.cloudant.com',
username: process.env.COUCH_USER,
pwd: process.env.COUCH_PWD,
database: 'perfslides',
updateSite: true
}
}
}
}

12. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
12

13. XYZ – Making FEP testing a part of C.I. (Browser-Perf/Perfjankie)
13
References
1. http://4waisenkinder.de/blog/2013/12/22/how-to-measure-frontend-performance-with-
phantomas-and-grunt/
2. http://aaron.jorb.in/blog/2012/07/automating-your-front-end-development-workflow/
3. http://blog.maxcdn.com/behind-scenes-tools-maxcdn-com/
4. http://blog.revolunet.com/blog/2013/12/05/unit-testing-angularjs-directive/
5. http://calendar.perfplanet.com/2013/phantomas/
6. http://embersherpa.com/articles/introduction-to-ember-app-kit/
7. http://fourword.fourkitchens.com/article/automated-frontend-tools
8. http://fourword.fourkitchens.com/article/performance-design-budget-and-test
9. http://internetmarketing-readme.pricemaniacs.com/category/website-performance/
10. http://isobar-idev.github.io/code-standards/
11. http://jeremyckahn.github.io/blog/2012/07/01/treating-javascript-like-a-30-year-old-
language/
12. http://nparashuram.com/perfslides/
13. http://rupl.github.io/frontend-ops
14. http://rupl.github.io/frontend-perf
15. http://rupl.github.io/frontend-testing
16. http://spy-js.com/why.html
17. http://updates.html5rocks.com/2013/11/The-Landscape-Of-Front-end-Development-
Automation-Slides
18. http://www.slideshare.net/ArtemGovorov/spyjs
19. http://www.smashingmagazine.com/2013/06/11/front-end-ops/
20. https://austin2014.drupal.org/session/automated-frontend-testing
21. https://gist.github.com/axemclion/8620794
22. https://github.com/axemclion/browser-perf
23. https://github.com/axemclion/perfjankie/
24. https://hacks.mozilla.org/2012/12/fantastic-front-end-performance-part-1-concatenate-
compress-cache-a-node-js-holiday-season-part-4/
25. https://www.npmjs.org/package/browser-perf
26. https://github.com/marcelduran/webpagetest-api