This document discusses automated browser performance testing. It describes measuring the perceived performance of specific interactions for a single user through tools like Chrome DevTools. The author discusses challenges of browser performance testing, such as network times, JavaScript execution, reflows, and on mobile browsers. The author also describes designing a JIRA browser performance test suite called Soke that defines timed sections and interactions to test JIRA performance and catch issues. The document emphasizes the importance of quantitative performance testing, being holistic in approach, and maintaining vigilance to address performance issues.

2. Show Me the Numbers
AUTOMATED BROWSER PERFORMANCE TESTING
CHRIS MOUNTFORD
•
SENIOR DEVELOPER, JIRA
•
ATLASSIAN
•
@CHROMOSUNDRIFT

3. 2005
3.4.1
7425

4. Inline
Edit
Search
Detail
View

5. Browser Performance
Testing

6. “
Measuring the perceived
performance of specific
interactions for a single user
”

7. “
Measuring the perceived
performance of specific
interactions for a single user
”

8. JavaScript Timeline

9. 1995
Classical JavaScript

10. Just text by itself, for
impact.

12. “Why do we split
everything into so
many files?”
“Performance.”

13. “Why do we merge all
the files into large
batches?”
“Performance.”

14. “Why...”
“Performance!”

15. “
Show me the numbers!
NOT JACKY CHAN
”

16. “
If we have data, let’s look at
data. If all we have are opinions,
let’s go with mine.
JIM BARKSDALE
”

17. Performance has
many enemies

18. The Mobile Web
EVERYTHING IS THE SAME BUT WORSE
• network / radio power mode steps, sleep, etc.
• cpu / battery impact
• memory
• standards compliance
• tooling

19. NETWORK TIME

20. PARSE TIME

21. JavaScript Execution
• JS Engines
• native bind(), map() etc
• V8: hidden classes, arrays, gc
• DOM Manipulation
• events
• JQuery
• Sizzle selectors
• Memory leaks

22. BLOCKING
<SCRIPT SRC=”WTF.JS”>

23. Tools
Chrome DevTools,
Chrome WTF
Firebug Lite
dynaTrace

24. Reflow

26. Yes!
Will It Reflow?
inspired by @stoyanstefanov

27. But wait, there’s more!
• CSS Transforms
• Hardware acceleration?
• Data weight
• Concurrent request count
• Inline Base64 Encoded resources

28. Designing the JIRA
Browser Performance
Test Suite

29. Automated JIRA Browser
Performance Tests
Baselines
Vigilance
Koto Psycho OnDemand
Charts Events Analytics
Hacking
Page
Objects
Soke
Bamboo
Framework
Plugin
DB

30. Soke Interactions
• Define Timed Sections
• Number of Repetitions
• Personas
Mad
Props to
Atlassian
PerfEng
Team

31. Soke Interactions In Scala

34. Optimization Techniques
• Batching
• Atlassian Plugins, No Worries
• Predictive Fetching
• Guided by Analytics
• Caching
• Watch for memory leaks

35. “
”
I don’t know... it just feels slow.
A JIRA PRODUCT MANAGER

36. Perception is Reality

38. Psycho Latency
• Ready for Action
• When does the User believe the app is waiting
for her?
• Manual “psycho” event placement
• and maintenance!
• Yardstick tuning against a real system
• Optimization Example: Execution Reordering

39. Gotchas

40. click( )

41. Selenium / Webdriver
• Chromedriver implemented by Chromium team
• mouse click on geometric centre of target
• W3C Webdriver wire protocol draft
• OK Browsers, follow the standard!

42. Selenium / Webdriver
• Windows and IE process control
• Browser auto-upgrades
• Changing what you measure
• Prefetch cache benefit in JIRA 6.0

43. Takeaway tweets:
• Performance has many enemies
• Be holistic, be quantitative, beware the microoptimization trap
• Perception is Reality
• The price of performance is eternal vigilance
#atlassiansummit

44. Thank you!
CHRIS MOUNTFORD
•
SENIOR DEVELOPER, JIRA
•
ATLASSIAN
•
@CHROMOSUNDRIFT

45. Rate this Talk
Show Me the Numbers: Automated Browser
Text code below to 22333
or visit http://bit.ly/197mpCa
MEH = 45
NO T BA D = 46
P R ET T Y GO O D = 47
A WES O ME = 48
To join this session, send text 136888 to