Download - JS performance tools
✦ 8 years in IT
✦ 4 years in SoftServe
✦ 1.5 years Application Architect
✦Main language: Javascript
✦ Hobby language: Go
✦ Pacemaker conference
✦ Script’n’Code meet-up
✦Open source (typescript grails, clio
go, sonar qunit, kojak, jspro)
do
vch
ar lv
ivjs
20
14
About
me
do
vch
ar lv
ivks 2
01
4
Agenda
✦ About Project
✦Memory leaks, how are you
✦Why some actions so slow?!
✦ Start analyzing
✦ JS tools
✦ Chrome, iOS monitoring, Kojak, jsPro,
PSI, Chrome remote debug
✦ Examples
✦Questions?..
Pro
ject
Sta
tistics
✦ 3 years development
✦ 10 scrum teams
✦ 59 modules
✦ 3200 javascript files
✦ 200.000 lines of code
✦ 1.226 total violations
✦ 70.3% code coverage
✦ 83.0% code health
do
vch
ar lv
ivjs
20
14
Sta
rt A
naly
sin
g
✦ Include analytic tools: google analytics, New Relic,
AppDynamics, etc
✦ BAs should prepare top 10-15 pages most used
✦ BAs + QC should prepare test workflows for those pages
✦ Prepare data for tests, infrastructure (load balancer, cdn,
servers, db) very close to production
✦ Prepare test tools for testing and come to an agreement
with the stakeholders (because they might be commercial,
not free)
✦ Preliminary data gathering from one or two scenarios
✦ Need to teach your team how to work with tool set and
manage its data
✦ Automate as much as you can
do
vch
ar lv
ivjs
20
14
Tools
✦ Chrome dev tools
✦ Chrome remote debugger
✦ Xcode iOS monitoring
✦ AppDynamics UX plugin
✦Google analytics
✦ Kojak
✦ KojakSync + jsPro
✦ PageSpead Insights (PSI API)
do
vch
ar lv
ivjs
20
14
Analy
tics
✦ Google Analytics is built on a powerful, easy-to-use reporting
platform, so that you can decide what data you want to view
and customize your reports, with just a few clicks
✦ Content reports help you understand which parts of your
website are performing well and which pages are most
popular so that you can create a better experience for your
customers
✦ You can analyse how visitors interact with sharing features on
your site (like the Google +1 button) and engage with your
content across social platforms
✦ Google Analytics helps you measure the impact of mobile on
your business
✦ Find out how many customers you're attracting, how much
you're selling and how users are engaging with your site with
Google Analytics' range of analysis features.
✦ Make the most of your advertising by learning how well your
social, mobile, search and display ads are working
do
vch
ar lv
ivjs
20
14
Chro
me T
ools
do
vch
ar lv
ivjs
20
14
html5rocks.com
Chro
me R
D
do
vch
ar lv
ivjs
20
14
ios-w
ebkit-d
ebug-p
roxy
✦ Where your heaviest loads originate
✦ Where your slowest end-user response times occur
✦ how performance varies by location
✦ how performance varies by client type, device, browser and
browser version,network connection
✦ how performance varies by application and application version,
operating system version, device, carrier for mobile apps
✦ what your slowest Web requests/Ajax requests are and what is
causing the slowdown
✦ what your slowest mobile network requests are and what is
causing the slowdown
✦ how application server performance impacts the performance of
your web and mobile traffic
AppD
ynam
ics U
X
do
vch
ar lv
ivjs
20
14
Wh
o is K
oja
k
«Kojak is an American television series starring Telly Savalas as the title
character, New York City Police Department Detective Lieutenant Theo Kojak.
Taking the time slot of the popular Cannon series, moved one hour earlier, it aired
on CBS from October 24, 1973, to March 18, 1978. In 1999 TV Guide ranked Theo
Kojak number 18 on its 50 Greatest TV Characters of All Time list»
Wikipedia
do
vch
ar lv
ivjs
20
14
Koja
k J
S
Kojak is a simple utility that can help you figure out which of your
JavaScript functions are running too slow. It tracks when your
functions are called, how often they are called, how much time
they are taking, how the functions were called. It can also track
your ajax calls and help figure out how fast they are.
What is Kojak JS?
do
vch
ar lv
ivjs
20
14
Featu
res
✦ Kojak helps you focus on the performance of your own code
and eliminate the clutter
✦ Kojak is a tool that would remove all of the noise and clutter
✦ Kojak is a tool that was easy to configure and didn't force you to
inject hooks all over my code
✦ The core of Kojak has no external dependencies
✦ We can easily integrate Kojak with Backbone, Angular or
Ember
✦ Measure isolated time of your functions. IsolatedTime is how
much cumulative time was spent inside the function itself
✦ Measure functions call count. Call count how often some
functions has called.
✦ Tracking performance in between actions
✦ Tracking Network Requests
do
vch
ar lv
ivjs
20
14
Expla
nation
Aspect-Oriented Programming
(AOP) is a programming paradigm
that aims to increase modularity by
allowing the separation of cross-
cutting concerns. AOP forms a basis
for aspect-oriented software
development.
do
vch
ar lv
ivjs
20
14
Ho
w T
o
✦ To use Kojak copy/download the Kojak.min.js file from
github.com/theironcook/Kojak. Include it in the browser code you
want to profile.
✦ Kojak needs to be told what code it is supposed to profile. You tell
Kojak via the command: kConfig.setIncludedPakages(['packageA',
‘packageB’]);
✦ After you've told Kojak what it should are about and what to exclude
you need to run this command: kInst.instrument();
✦ Start tracking performance in between actions: run
kInst.takeCheckpoint(); for creating checkpoint before actions begin.
✦ After doing some use cases run kRep.funcPerfAfterCheckpoint(); and
collect isolated time and call count all functions has ran from last
kInst.takeCheckpoint();
✦ Kojak can also track all of your network ajax requests. To use the
NetWatcher you must use jQuery. To enable run this command:
kConfig.setEnableNetWatcher(true); and kRep.netCalls(); after
do
vch
ar lv
ivjs
20
14
Isola
ted T
ime
Program
funcA()
funcB()
funcC()
funcA()
5ms
funcB()
10ms
funcC()
15ms
do
vch
ar lv
ivjs
20
14
Isola
ted T
ime
Program
funcA()
funcA()
5ms
funcB()
10ms
funcC()
15ms
325
1 5jFunc()
50ms
1
do
vch
ar lv
ivjs
20
14
Isola
ted T
ime
Program
funcA()
funcA()
5ms
funcB()
10ms
funcC()
15ms
15
1 5async()
50ms
1
do
vch
ar lv
ivjs
20
14
Koja
k &
jsP
ro
KojakSync#1 KojakSync#2 KojakSync#N
jsPro Visualization
Storage
do
vch
ar lv
ivjs
20
14
Koja
k &
jsP
ro
✦ To use KojakSync copy/download the Kojak.js file from
github.com/dovchar/KojakSync. Include it in the browser code
you want to profile
✦ Go to jspro.herokuapp.com
✦ Login with your github account -> your name -> my apps ->
click «create new» button -> copy API Key and Secret Key
✦ Run Google Chrome with flags:
—enable-memory-info --js-flags="--expose-gc"
✦ Enable kojak sync functionality: kConfig.sync('secretKey',
‘apiKey');
✦ Todo all steps like with native Kojak for collect data
do
vch
ar lv
ivjs
20
14
Next S
teps
✦ Prepare good documentation
✦ Stabilize jsPro application (fix bugs)
✦ Extend functionality
✦ Integrate Google PSI API
✦ Integrate Chrome Remote Debugger
✦ Collect errors from UI
✦ Snapshots by User session for
production usage
✦Granular collecting data for prod
mode
do
vch
ar lv
ivjs
20
14
Lin
ks
✦ AppDynamics
✦Google Analytics
✦ Chrome Dev Tools
✦ Kojak, KojakSync, jsPro
✦ pacemaker, script’n’code
✦ Sails.js
Facebook Twitter Linkedin Gmaildo
vch
ar lv
ivjs
20
14