Downloaded 35 times
![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);
}](https://image.slidesharecdn.com/performance-tuning-in-hybrid-apps-130529041035-phpapp02/85/Performance-tuning-in-hybrid-mobile-apps-12-320.jpg)
Uploaded byNavneet kumar
Performance tuning in hybrid mobile apps
This document discusses performance tuning in hybrid apps. It outlines some common performance issues like startup latency, memory consumption, and response time. It then explores various techniques for performance benchmarking and conventional performance tuning, such as reducing network requests through compression, lazy loading resources, optimizing memory and CPU usage, implementing local caching, minimizing code, and compressing media files. The goal is to meet expected performance metrics for latency, memory usage, and response times in hybrid apps.
More Related Content
Similar to Performance tuning in hybrid mobile apps
![[TTT Meetup] Enhance mobile app testing with performance-centric strategies (...](https://cdn.slidesharecdn.com/ss_thumbnails/tttenhancemobileapptestingwithperformance-centricstrategies1-220425045726-thumbnail.jpg?width=640&height=640&fit=bounds)
Performance tuning in hybrid mobile apps
- 1. Performance tuning inHybrid apps ISHA TRIPATHI & NAVNEET KUMAR
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. Performance Benchmarking Tools • Weinre •Firebug-lite • jsPerf Scripts/Libraries • Zepto.js • jQuery • jqMobi Individual Webkits • iOS • Android • Desktop
- 9.
- 10.
- 11. Performance tuning Start-up latency Lazy loading/unloadi ng Memory/CPU Management LocalCaching Code optimization Media Compression
- 12. Startup latency Single thread Reduced parsing Dividelatency 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 mediasize 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 storageas cache store Volatile cache vs persistent cache Save entire object reference
- 16.
- 17.
- 18. Performance tuning Start-up latency Lazy loading/unloadi ng Memory/CPU Management LocalCaching Code optimization Media Compression
Editor's Notes
- #2 Presenter:isha,navneet1.Intro2.Business overview readers
- #3 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
- #4 1.Benfit of hybrid app2.Why readers was in hybrid : 1.Folio is not open sourced 2.Platform indepenpent. 3.Native perfornancePresenter:isha
- #5 Time: 2m1.Contraints in any mobile app : what matters2.Expected experience by a userPresenter:navneet
- #6 Time: 11.Latency was very high2.Crash only in iOS3.Native Scrolling was poor,Response time of actions was badPresenter:navneet
- #7 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
- #8 Time:0
- #9 Time:4mDemo required1.Benchmarking tools : Weinre/jsperf/Firebug lite2.Benmarked webkit : we found 4 time slower3.Benchmarked libs : zepto/jqmobi/jquery4.Benchmarked codePresenter:navneet
- #10 Time:2mDemo required1.Benchmarking tools : Weinre/jsperf/Firebug lite2.Benmarked webkit : we found 4 time slower3.Benchmarked libs : zepto/jqmobi/jquery4.Benchmarked codePresenter:navneet
- #11 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.
- #12 Time: 1mPresenter:isha
- #13 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
- #14 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
- #15 Time:3mWhy:1.App crashes in iOS/jettisioned2.Never block UI threadHow:1.Remove zombies from code2.Memoize the functions3.Queue implementationPresenter:navneet
- #16 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
- #17 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
- #18 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
- #19 Time: 1mPresenter:navneet
- #20 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