performance optimization for sencha touch
DESCRIPTION
Mobile devices have very limited processing power compared to modern desktops. It's essential to keep performance optimization in mind when developing Touch applications. Here, we'll discuss how to keep your mobile web app fast and lightweight. We'll learn about such techniques as keeping your DOM slim, managing troublesome CSS3 properties, and other ways to keep your app sleek and responsive.TRANSCRIPT
Performance Optimization for Sencha Touch
by Tommy Maintz@tommymaintz
ProblemsDOM
EventsDrawing
AnimationsCode execution
Device specific issuesLimited hardware acceleration
Translate3d
DOM: Memory(Size matters)
One small advantagePhones have a limited amount of screen estate
SolutionDestroy components that are not visible on the screen anymore
Cards
Modal Components
Events: Memory
SolutionUse our Event ManagerAutomatic removal of listenersDelegation for Touch eventsUse event delegation when possible
Elements
Components
Drawing: GPU
No small advantageDevices will get faster
Better hardware acceleration
SolutionKeep your DOM structures “light”
Light?Limited amount of advanced CSS3opacity & rgbaborder-radiusgradientstext-shadow & box-shadowsLimit the amount and depth of DOM elements
Don’t go too deep Prevent unnecessary layouts
Animations: GPU
Good enough
Getting There
Little behind
iPhone 3GS+ Most Android 2.2 devices
RIM
SolutionOnly animate “light” DOM structures
Slide to List
Code Execution: Compiler
Not the usual suspectsCPU’s are actually fast enoughJavascript engines are powerful
So what is the problem?
JIT CompilerCompilation time is related to size of file that the method
exists in
Extensive comments and documentation are
Complexity not relevant
Write complicated undocumented code
Solution
Actual solutionTest performance using minified and compressed code
JSBuilder 3Cross-OS packaging, concatenation & minification
Example .jsb3
Questions?