An approach toperformance tuning of modern,realtime web based applications
Upcoming SlideShare
Loading in...5
×
 

An approach toperformance tuning of modern,realtime web based applications

on

  • 522 views

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

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

Statistics

Views

Total Views
522
Views on SlideShare
522
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

An approach toperformance tuning of modern,realtime web based applications An approach toperformance tuning of modern,realtime web based applications Presentation Transcript

  • AN APPROACH TOPERFORMANCE TUNING OF MODERN,REALTIME WEB-BASED APPLICATIONS Andrei Sebastian Cîmpean 2013
  • Terminology● Repository = the entire data used by the application● DOM = Document Object Model● Dev Tools = Chrome ( Webkit ) Developer Tools● GC = JavaScript Garbage Collector
  • Realtime web-based applications● HTML5 Web Sockets change the scalability game● Highly dynamic content updates● JavaScript driven full HTML interface● Rich, responsive UI View slide
  • WebSockets Application interaction with WebSockets View slide
  • 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. ( http://www.websocket.org/quantum.html )
  • 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
  • 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
  • Rich, responsive UI● Application styling can get out of hand● Multiple, overlapping animations● Never-ending timers
  • 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 )
  • Testing strategy ● Manual driven testing ● Simulator driven performance testing
  • Testing material● For this presentation I will use a small application developed by JavaScript trainees● It can be found at: https://github.com/vladpupaza/slide.app.modular.backbone● It is MIT licensed● Requirements: Implement an online presentation system resembling the capabilities of presentation apps ( PowerPoint, Impress, etc. )
  • Frame-rate loss, slow apps, long blocking operations
  • 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
  • Testing for operations that slow down the application
  • Testing for operations that slow down the application
  • Testing for operations that slow down the application
  • GC and memory leaks
  • Testing for operations that cause bad UX● GC cleanups “Saw” effect cause constant UI freezes● Game creators use object pools to mitigate this issue
  • GC acts and clears marked objects
  • Identify causes of memory leaks1.Heap Profiling ( https://developers.google.com/chrome-developer-tools/docs/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
  • Identify causes of memory leaks
  • 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
  • Page load issues
  • 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)
  • Identify page load issuesImage taken from the Navigation Timing Draft
  • 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 )
  • WebSockets communication
  • WebSocket communication architecture – reminder Application interaction with WebSockets
  • 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 )
  • 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
  • Questions ?
  • Thank you!