An approach toperformance tuning of modern,realtime web based applications
-
Upload
andrei-sebastian-cimpean -
Category
Documents
-
view
408 -
download
1
description
Transcript of An approach toperformance tuning of modern,realtime web based applications
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!