JS performance tools
•Download as PPTX, PDF•
1 like•563 views
This document discusses various tools for analyzing JavaScript performance. It introduces Kojak, a tool for measuring JavaScript function performance, and jsPro, a visualization tool that works with Kojak. It provides instructions on how to use Kojak to track function call times and counts. It also explains how Kojak can be integrated with jsPro for online visualization of profiling data. Other profiling tools mentioned include Chrome Dev Tools, Google Analytics, AppDynamics, and PageSpeed Insights.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to JS performance tools
Similar to JS performance tools (20)
Recently uploaded
Recently uploaded (20)
JS performance tools
- 1. A long time ago… dovchar 2014
- 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. 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. 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
- 6. iPad2 is falling down dovcharlvivjs2014
- 7. Dima WTF…, Why some actions are so SLOW?! dovcharlvivjs2014
- 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. Tools ✦ Chrome dev tools ✦ Chrome remote debugger ✦ Xcode iOS monitoring ✦ AppDynamics UX plugin ✦ Google analytics ✦ Kojak ✦ KojakSync + jsPro ✦ PageSpead Insights (PSI API) dovcharlvivjs2014
- 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
- 18. Memorymodedovcharlvivjs2014 Chrome Dev Tools -> Timeline
- 19. Memorysnapshotdovcharlvivjs2014 CD Tools -> Profiles -> Take Heap Snapshot
- 20. TaskManager Menu -> Tools -> Task Manager dovcharlvivjs2014
- 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
- 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. 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. 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. 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. 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
- 31. IsolatedTime Program funcA() funcB() funcC() funcA() 5ms funcB() 10ms funcC() 15ms dovcharlvivjs2014
- 36. Kojak&jsPro KojakSync#1 KojakSync#2 KojakSync#N jsPro Visualization Storage dovcharlvivjs2014
- 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
- 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
- 42. Links ✦ AppDynamics ✦ Google Analytics ✦ Chrome Dev Tools ✦ Kojak, KojakSync, jsPro ✦ pacemaker, script’n’code ✦ Sails.js Facebook Twitter Linkedin Gmail dovcharlvivjs2014