AN APPROACH TOPERFORMANCE TUNING OF MODERN, REALTIME WEB-BASED APPLICATIONS

Andrei Sebastian Cîmpean2013

● Repository = the entire data used by the application

● DOM = Document Object Model● Dev Tools = Chrome ( Webkit )

Developer Tools● GC = JavaScript Garbage Collector

Terminology

Realtime web-based applications

● HTML5 Web Sockets change the scalability game

● Highly dynamic content updates● JavaScript driven full HTML interface● Rich, responsive UI

Application interaction with WebSockets

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 )

WebSockets

● 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

Highly dynamic content updates

● 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

JavaScript driven full HTML UI

● Application styling can get out of hand● Multiple, overlapping animations● Never-ending timers

Rich, responsive UI

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 strategy

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

1.Using the developer tools record a “run” through the application

2.Pick a spike and focus on it

3.Inspect possible causes and fix code

4.Record another run to check spike status

5.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

Testing for operations that slow down the application

GC and memory leaks

● GC cleanups “Saw” effect cause constant UI freezes

● Game creators use object pools to mitigate this issue

Testing for operations that cause bad UX

GC acts and clears marked objects

1.Heap Profiling( https://developers.google.com/chrome-developer-tools/docs/heap-profiling )

2.Take Heap snapshots and compare them in order to find DOM leaks

3.Principle of repetition applies, perform the same task multiple time, taking heap snapshots after each execution

4.In depth view: browser gc and framerate

Identify causes of memory leaks

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

● 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 issues

Identify page load issues

Image 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

Application interaction with WebSockets

WebSocket communication architecture – reminder

● 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 architecture

● 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

WebSocket communication testing

Questions ?

Thank you!