Performance Optimization for Sencha Touch
•
11 likes•7,317 views
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.
Performance Optimization for Sencha Touch
- 2. Performance Optimization for Sencha Touch by Tommy Maintz @tommymaintz
- 3. Problems DOM Events Drawing Animations Code execution
- 4. Device specific issues Limited hardware acceleration Translate3d
- 5. DOM: Memory (Size matters)
- 6. One small advantage Phones have a limited amount of screen estate
- 7. Solution Destroy components that are not visible on the screen anymore
- 8. Cards
- 10. Events: Memory
- 11. Solution Use our Event Manager Automatic removal of listeners Delegation for Touch events Use event delegation when possible
- 12. Elements
- 13. Components
- 14. Drawing: GPU
- 15. No small advantage Devices will get faster Better hardware acceleration
- 16. Solution Keep your DOM structures “light”
- 17. Light? Limited amount of advanced CSS3 opacity & rgba border-radius gradients text-shadow & box-shadows Limit the amount and depth of DOM elements
- 18. Don’t go too deep Prevent unnecessary layouts
- 21. Animations: GPU
- 22. Good Getting Little enough There behind Most Android iPhone 3GS+ RIM 2.2 devices
- 23. Solution Only animate “light” DOM structures
- 24. Slide to List
- 27. Not the usual suspects CPU’s are actually fast enough Javascript engines are powerful
- 28. So what is the problem?
- 29. JIT Compiler Compilation time is related to size of file that the method exists in
- 30. Complexity not relevant Extensive comments and documentation are
- 32. Actual solution Test performance using minified and compressed code
- 33. JSBuilder 3 Cross-OS packaging, concatenation & minification
- 34. Example .jsb3
- 35. Questions?