performance optimization for sencha touch

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?