Performance Optimization for Sencha Touch
-
Upload
sencha -
Category
Technology
-
view
16.011 -
download
1
description
Transcript of Performance Optimization for Sencha Touch
![Page 1: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/1.jpg)
![Page 2: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/2.jpg)
Performance Optimization for Sencha Touch
by Tommy Maintz@tommymaintz
![Page 3: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/3.jpg)
ProblemsDOM
EventsDrawing
AnimationsCode execution
![Page 4: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/4.jpg)
Device specific issuesLimited hardware acceleration
Translate3d
![Page 5: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/5.jpg)
DOM: Memory(Size matters)
![Page 6: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/6.jpg)
One small advantagePhones have a limited amount of screen estate
![Page 7: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/7.jpg)
SolutionDestroy components that are not visible on the screen anymore
![Page 8: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/8.jpg)
Cards
![Page 9: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/9.jpg)
Modal Components
![Page 10: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/10.jpg)
Events: Memory
![Page 11: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/11.jpg)
SolutionUse our Event ManagerAutomatic removal of listenersDelegation for Touch eventsUse event delegation when possible
![Page 12: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/12.jpg)
Elements
![Page 13: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/13.jpg)
Components
![Page 14: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/14.jpg)
Drawing: GPU
![Page 15: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/15.jpg)
No small advantageDevices will get faster
Better hardware acceleration
![Page 16: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/16.jpg)
SolutionKeep your DOM structures “light”
![Page 17: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/17.jpg)
Light?Limited amount of advanced CSS3opacity & rgbaborder-radiusgradientstext-shadow & box-shadowsLimit the amount and depth of DOM elements
![Page 18: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/18.jpg)
Don’t go too deep Prevent unnecessary layouts
![Page 19: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/19.jpg)
![Page 20: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/20.jpg)
![Page 21: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/21.jpg)
Animations: GPU
![Page 22: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/22.jpg)
Good enough
Getting There
Little behind
iPhone 3GS+ Most Android 2.2 devices
RIM
![Page 23: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/23.jpg)
SolutionOnly animate “light” DOM structures
![Page 24: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/24.jpg)
Slide to List
![Page 25: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/25.jpg)
![Page 26: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/26.jpg)
Code Execution: Compiler
![Page 27: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/27.jpg)
Not the usual suspectsCPU’s are actually fast enoughJavascript engines are powerful
![Page 28: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/28.jpg)
So what is the problem?
![Page 29: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/29.jpg)
JIT CompilerCompilation time is related to size of file that the method
exists in
![Page 30: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/30.jpg)
Extensive comments and documentation are
Complexity not relevant
![Page 31: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/31.jpg)
Write complicated undocumented code
Solution
![Page 32: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/32.jpg)
Actual solutionTest performance using minified and compressed code
![Page 33: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/33.jpg)
JSBuilder 3Cross-OS packaging, concatenation & minification
![Page 34: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/34.jpg)
Example .jsb3
![Page 35: Performance Optimization for Sencha Touch](https://reader030.fdocuments.in/reader030/viewer/2022020217/54b3da4d4a7959d1628b4583/html5/thumbnails/35.jpg)
Questions?