An approach toperformance tuning of modern,realtime web based applications


Published on

A presentation I had to put together detailing an approach to test and tune the performance of a modern web app

  • Be the first to comment

  • Be the first to like this

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

No notes for slide

An approach toperformance tuning of modern,realtime web based applications

  2. 2. Terminology● Repository = the entire data used by the application● DOM = Document Object Model● Dev Tools = Chrome ( Webkit ) Developer Tools● GC = JavaScript Garbage Collector
  3. 3. Realtime web-based applications● HTML5 Web Sockets change the scalability game● Highly dynamic content updates● JavaScript driven full HTML interface● Rich, responsive UI
  4. 4. WebSockets Application interaction with WebSockets
  5. 5. WebSockets● full-duplex, bidirectional communications channel that operates through a single socket over the Web● WebSocket connections can remain open for a long time● HTML5 Web Sockets can provide up to a 500:1 reduction in unnecessary HTTP header traffic and 3:1 reduction in latency. ( )
  6. 6. Highly dynamic content updates● The DOM is rapidly and constantly updated because of Repository updates; causes a drop in frame rate● GC pops in; causes UI freeze● Expensive operations, repeated parsings, UI blocking, etc
  7. 7. JavaScript driven full HTML UI● Bad handling of DOM operations; causes memory leaks● Repeated full searches for elements in DOM; slows down application● Multiple rendering of the same content● Multiple bindings causing the same logic to be executed multiple times● All developer fault
  8. 8. Rich, responsive UI● Application styling can get out of hand● Multiple, overlapping animations● Never-ending timers
  9. 9. Testing strategy 1.Identify operations that slow down the application 2.Identify causes of memory leaks 3.Identify page load speed issues 4.WebSocket communication improvement ( if required )
  10. 10. Testing strategy ● Manual driven testing ● Simulator driven performance testing
  11. 11. Testing material● For this presentation I will use a small application developed by JavaScript trainees● It can be found at:● It is MIT licensed● Requirements: Implement an online presentation system resembling the capabilities of presentation apps ( PowerPoint, Impress, etc. )
  12. 12. Frame-rate loss, slow apps, long blocking operations
  13. 13. Testing for operations that slow down the application1.Using the developer tools record a “run” through the application2.Pick a spike and focus on it3.Inspect possible causes and fix code4.Record another run to check spike status5.If fixed, pick next spike
  14. 14. Testing for operations that slow down the application
  15. 15. Testing for operations that slow down the application
  16. 16. Testing for operations that slow down the application
  17. 17. GC and memory leaks
  18. 18. Testing for operations that cause bad UX● GC cleanups “Saw” effect cause constant UI freezes● Game creators use object pools to mitigate this issue
  19. 19. GC acts and clears marked objects
  20. 20. Identify causes of memory leaks1.Heap Profiling ( )2.Take Heap snapshots and compare them in order to find DOM leaks3.Principle of repetition applies, perform the same task multiple time, taking heap snapshots after each execution4.In depth view: browser gc and framerate
  21. 21. Identify causes of memory leaks
  22. 22. Identify causes of memory leaks● Dev Tools has the ability to reflect bidirectional dependencies between browser native objects (DOM nodes, CSS rules) and JavaScript objects● discover otherwise invisible leaks happening due to forgotten detached DOM sub-trees floating around
  23. 23. Page load issues
  24. 24. Identify page load issues ● Measuring Page Load Speed with Navigation Timing using the window.performance object ● Compressing received data is a good idea ● Limit the number of calls to server(s)
  25. 25. Identify page load issuesImage taken from the Navigation Timing Draft
  26. 26. Identify page load issues – simple issues & fixes● Image files that could be merged into one ( create sprite )● Multiple JavaScript files could be compiled and minified into one ( same goes for CSS and HTML )
  27. 27. WebSockets communication
  28. 28. WebSocket communication architecture – reminder Application interaction with WebSockets
  29. 29. WebSocket communication architecture● More complex architectures may use WebSockets for operation validations, adding a layer of security and also a performance challenge● WebSockets can be a hog on bandwidth ( optimizing websockets bandwidth )
  30. 30. WebSocket communication testing● A server that bounces every message it gets back to the client● A JS client that sends messages to server and measure how long it takes for each message to be sent back● From results build a histogram● In depth view: websocket performance
  31. 31. Questions ?
  32. 32. Thank you!