JS performance tools


Published on

js performance, memory leaks, kojak, jsPro, kojakSync, LvivJS

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JS performance tools

  1. 1. A long time ago… dovchar 2014
  2. 2. ✦ 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) dovcharlvivjs2014 Aboutme
  3. 3. dovcharlvivks2014 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?..
  4. 4. ProjectStatistic ✦ 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 dovcharlvivjs2014
  5. 5. AboutProjectdovcharlvivjs2014
  6. 6. iPad2 is falling down dovcharlvivjs2014
  7. 7. Dima WTF…, Why some actions are so SLOW?! dovcharlvivjs2014
  8. 8. dovcharlvivjs2014
  9. 9. StartAnalysing ✦ 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 dovcharlvivjs2014
  10. 10. Tools ✦ Chrome dev tools ✦ Chrome remote debugger ✦ Xcode iOS monitoring ✦ AppDynamics UX plugin ✦ Google analytics ✦ Kojak ✦ KojakSync + jsPro ✦ PageSpead Insights (PSI API) dovcharlvivjs2014
  11. 11. GoogleAnalyticsdovcharlvivjs2014
  12. 12. GoogleAnalytics ✦ 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 dovcharlvivjs2014
  13. 13. Xcodedovcharlvivjs2014
  14. 14. Xcodedovcharlvivjs2014
  15. 15. Xcodedovcharlvivjs2014
  16. 16. Xcodedovcharlvivjs2014
  17. 17. ChromeToolsdovcharlvivjs2014 html5rocks.com
  18. 18. Memorymodedovcharlvivjs2014 Chrome Dev Tools -> Timeline
  19. 19. Memorysnapshotdovcharlvivjs2014 CD Tools -> Profiles -> Take Heap Snapshot
  20. 20. TaskManager Menu -> Tools -> Task Manager dovcharlvivjs2014
  21. 21. ChromeRDdovcharlvivjs2014 ios-webkit-debug-proxy
  22. 22. AppDynamicsUXdovcharlvivjs2014
  23. 23. ✦ 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 AppDynamicsUXdovcharlvivjs2014
  24. 24. Kojakdovcharlvivjs2014
  25. 25. WhoisKojak «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 dovcharlvivjs2014
  26. 26. KojakJS 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? dovcharlvivjs2014
  27. 27. Features ✦ 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 dovcharlvivjs2014
  28. 28. Explanation 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. dovcharlvivjs2014
  29. 29. HowTo ✦ 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 dovcharlvivjs2014
  30. 30. Consoleexampledovcharlvivjs2014
  31. 31. IsolatedTime Program funcA() funcB() funcC() funcA() 5ms funcB() 10ms funcC() 15ms dovcharlvivjs2014
  32. 32. IsolatedTime Program funcA() funcA() 5ms funcB() 10ms funcC() 15ms 1 5 dovcharlvivjs2014
  33. 33. IsolatedTime Program funcA() funcA() 5ms funcB() 10ms funcC() 15ms 325 1 5 jFunc() 50ms 1 dovcharlvivjs2014
  34. 34. IsolatedTime Program funcA() funcA() 5ms funcB() 10ms funcC() 15ms 15 1 5 async() 50ms 1 dovcharlvivjs2014
  35. 35. jsProdovcharlvivjs2014 jsPro
  36. 36. Kojak&jsPro KojakSync#1 KojakSync#2 KojakSync#N jsPro Visualization Storage dovcharlvivjs2014
  37. 37. Kojak&jsProdovcharlvivjs2014
  38. 38. Kojak&jsPro ✦ 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 dovcharlvivjs2014
  39. 39. Kojak&jsPro Demo… dovcharlvivjs2014
  40. 40. NextSteps ✦ 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 dovcharlvivjs2014
  41. 41. Conclusiondovcharlvivjs2014
  42. 42. Links ✦ AppDynamics ✦ Google Analytics ✦ Chrome Dev Tools ✦ Kojak, KojakSync, jsPro ✦ pacemaker, script’n’code ✦ Sails.js Facebook Twitter Linkedin Gmail dovcharlvivjs2014
  43. 43. Questionsdovcharlvivjs2014