SenchaCon Day3: SenchaTouch Performance Optimization

Tommy Mainz gives this talk.

Problems: DOM size, events, drawing, animation and code execution all affect performance on mobile devices.

DOM size:

  • Smaller screens help to keep DOM size smaller because there’s only so much data you can show without cognitive overload.
  • However, destroy components that you’re not using anymore in the deactivate. E.g. container.on(‘deactivate’, function(oldCard), { oldCard.destroy(); }); container.setActiveItem(newCard, ‘slide’); or overlay.on(‘hide’, function() { overlay.destroy(); });

Events – Solutions:

  • Use Event Manager from SenchaTouch which has automatic removal of listeners and delegation for Touch events.
  • Use event delegation when possible e.g. Ext.get(‘list’).on{ tap: function(e, target) {target.toggleCls(;pressed’); } delegate: ‘.list-item’)

Drawing: GPU

  • Keep your DOM structures “light” (especially in Android) by limited amount of advanced CSS3 (e.g., opacity, rgba, border-radius, gradients, text-shadow and box-shadows) and limiting the amount and depth of DOM elements.
  • Don’t go too deep: prevent unnecessary layouts. e.g. you have a tab panel with a panel of two tabs (using layout of fit) but instead should just use tabpanel with items being tabs.

Animations: GPU

  • Slide to a list e.g. on beforeActivate use list.setload(true) on activate remove loading mask (set it to false).  It will be more seamless and less burden on the

Code Execution: Compiler

  • Android v8 compiler is leading in this space
  • Not the usual suspects, like CPUs and JS engines
  • The reason is JIT compilation which is related to size of the file that the method exists in; complexity of method doesn’t seem to be relevant but comments/docs in code
  • Solution is to use minified and compressed code of both SenchaTouch and your own code.
  • You can set up builds to do this with .jsb3 files (JSBuilder is bundled with SenchaTouch)  you have builds and packages that will minify and consolidate those files.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s