Performance tuning in hybrid mobile apps
•
2 j'aime•2,428 vues
This slides discuss the tips to improve performance in hybrid mobile application development
Recommandé
Contenu connexe
En vedette
Similaire à Performance tuning in hybrid mobile apps
Similaire à Performance tuning in hybrid mobile apps (20)
Plus de Navneet kumar
Dernier
Dernier (20)
Performance tuning in hybrid mobile apps
- 1. Performance tuning in Hybrid apps ISHA TRIPATHI & NAVNEET KUMAR
- 2. Hybrid App
- 3. Why Hybrid
- 7. Explored
- 8. Performance Benchmarking Tools • Weinre • Firebug-lite • jsPerf Scripts/Libraries • Zepto.js • jQuery • jqMobi Individual Webkits • iOS • Android • Desktop
- 11. Performance tuning Start-up latency Lazy loading/unloadi ng Memory/CPU Management Local Caching Code optimization Media Compression
- 12. Startup latency Single thread Reduced parsing Divide latency Dynamic script node function loadFile(url) { var script = document.createElement('SCRIPT'); script.src = url; document.getElementsByTagName('HEAD')[0].appendChild (script); }
- 13. Lazy loading/unloading Images/Javasc ripts (10-50kb) Constant memory Dynamic Image loading <img src=“loading.png” data- original=”sample.png" />
- 14. Memory/CPU Management Reduce media size Queue implementation Zombie objects iba.views.home = iba.views.home || new iba.views.Home(); var q = async.queue(function (task, callback) { console.log('hello ' + task.name); callback(); }, 2);
- 15. Local caching Local storage as cache store Volatile cache vs persistent cache Save entire object reference
- 18. Performance tuning Start-up latency Lazy loading/unloadi ng Memory/CPU Management Local Caching Code optimization Media Compression
Notes de l'éditeur
- Presenter:isha,navneet1.Intro2.Business overview readers
- Time: 2m1.What is hybrid,hybrid app,HTML52. Native: Multi touch - double taps, pinch-spread, and other compound UI gesturesFast graphics APIFluid animationBuilt-in componentsEase of useDocumentationPresenter:isha
- 1.Benfit of hybrid app2.Why readers was in hybrid : 1.Folio is not open sourced 2.Platform indepenpent. 3.Native perfornancePresenter:isha
- Time: 2m1.Contraints in any mobile app : what matters2.Expected experience by a userPresenter:navneet
- Time: 11.Latency was very high2.Crash only in iOS3.Native Scrolling was poor,Response time of actions was badPresenter:navneet
- Time:1.5m1.Latency- 5 secs is the max most users will wait for an app to load. Latency on servers, internet. geographically distributed servers to reduce latency.2 .Response time - three important limits: 0.1s,1.0s,10s a) 0.1 second :user feel that the system is reacting instantaneously no special feedback is necessary. b) 1.0 second: user's flow of thought to stay uninterrupted, will notice the delay. Normally, no special feedback is necessary but the user does lose the feeling of operating directly on the data. c)10 seconds: keeping the user's attention focused on the dialogue. users will want to perform other tasks while waiting for the computer to finish, hould be given feedback. Feedback during the delay is especially important if the response time is likely to be highly variable, users will then not know what to expect.3.Memory consumption – approx 18mb for android apps. Optimize to use minimum memory. When memory is low, the system may release cached intermediate language (IL) code to reduce its own memory footprintand thus slow overall execution.Presenter:isha
- Time:0
- Time:4mDemo required1.Benchmarking tools : Weinre/jsperf/Firebug lite2.Benmarked webkit : we found 4 time slower3.Benchmarked libs : zepto/jqmobi/jquery4.Benchmarked codePresenter:navneet
- Time:2mDemo required1.Benchmarking tools : Weinre/jsperf/Firebug lite2.Benmarked webkit : we found 4 time slower3.Benchmarked libs : zepto/jqmobi/jquery4.Benchmarked codePresenter:navneet
- Time:2mThese techniques for remoteapps which were useless for usCompression - Transfer compression(Compress content for efficient delivery.)Reduce DNS lookup - – make fewer,larger requests3. Sprites/Image maps- An image sprite is a collection of images put into a single image.
- Time: 1mPresenter:isha
- Time:4mWhy:1.Single threaded implementaion of javascript2.Was a function of number of DOM elementsHow:1.Load only required javascript/parsing javascript is expensive2.Pagination3.Divide the latency4.Presenter:navneet
- Time:2mWhy:1.Large Image size2.App crashesHow:1.Jquery lazy loader2.Use a data attribute for image src3.Small image(10-50kb)Presenter:isha
- Time:3mWhy:1.App crashes in iOS/jettisioned2.Never block UI threadHow:1.Remove zombies from code2.Memoize the functions3.Queue implementationPresenter:navneet
- Time:3mWhy:1.Slow server side response2.Offline 3.Even if server is fast mobile networks latency is pain though good bandwidthHow:1.LocalStorage/extended it to save the object ref2.Use volatile cache3.Namespace with release numberPresenter:isha
- Time: 5mWhy:1.Not a proper choice of library2.Other fixed times : API load time3.Slow CSS implementationHow:From 12 sec to 800msAvoid DOM access : leaving javascript VM engine and going to native code is expensiveUse bulk DOM access4. Reasonable DOM sizeMemoize slow running functionsThrottle the events/function which are occurs very fast and functions takes time: e.g:scrollHow:1.Avoid image resizing/takes up CPU2.Use compressed Data URI3.Avoid repainting4.Nested media queriesPresenter:Navneet
- Time: 2mWhy:1.Faster parsing2.Faster loadHow:1.Image compression:No loss/low memory footprint2.js-minification/cssminificationhttp://imageoptim.com/ ; http://smushit.com/ , second class media, http://www.smushit.com/ysmush.it/ ; pngcrushPresenter:isha
- Time: 1mPresenter:navneet
- Time: 2mWhy:1.Faster parsing2.Faster loadHow:1.Image compression:No loss/low memory footprint2.js-minification/cssminificationhttp://imageoptim.com/ ; http://smushit.com/ , second class media, http://www.smushit.com/ysmush.it/ ; pngcrushPresenter:isha