• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Performance tuning in hybrid mobile apps
 

Performance tuning in hybrid mobile apps

on

  • 1,159 views

This slides discuss the tips to improve performance in hybrid mobile application development

This slides discuss the tips to improve performance in hybrid mobile application development

Statistics

Views

Total Views
1,159
Views on SlideShare
1,150
Embed Views
9

Actions

Likes
1
Downloads
16
Comments
0

2 Embeds 9

http://www.linkedin.com 8
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Performance tuning in hybrid mobile apps Performance tuning in hybrid mobile apps Presentation Transcript

  • Performance tuning in Hybrid appsISHA TRIPATHI & NAVNEET KUMAR
  • Hybrid App
  • Why Hybrid
  • MemoryScreensizeLatency CPUConstraints
  • Performance hitsStartuplatencyUXCrashfrequencyBackwardCompatibility
  • Expected performanceLatencyResponsetimeMemoryconsumption0.111018 MB30 MB5sec
  • Explored
  • Performance BenchmarkingTools• Weinre• Firebug-lite• jsPerfScripts/Libraries• Zepto.js• jQuery• jqMobiIndividualWebkits• iOS• Android• Desktop
  • Performance Benchmarking
  • Conventional Performance tuningPerformanceTuningTransferCompressionOptimizedNetworkResourcesExternalizedassetsSprites/ImageMaps
  • Performance tuningStart-up latencyLazyloading/unloadingMemory/CPUManagementLocal CachingCodeoptimizationMediaCompression
  • Startup latencySinglethreadReduced parsingDivide latencyDynamic script nodefunction loadFile(url) {var script = document.createElement(SCRIPT);script.src = url;document.getElementsByTagName(HEAD)[0].appendChild(script);}
  • Lazy loading/unloadingImages/Javascripts(10-50kb)ConstantmemoryDynamicImageloading<img src=“loading.png” data-original=”sample.png" />
  • Memory/CPU ManagementReduce media sizeQueueimplementationZombie objectsiba.views.home = iba.views.home || new iba.views.Home();var q = async.queue(function (task, callback) {console.log(hello + task.name);callback();}, 2);
  • Local cachingLocal storage ascache storeVolatile cache vspersistent cacheSave entire objectreference
  • Code optimizationDOM TreeDuplicatejavascriptMemoizationEventthrottling
  • MediaMinificationImageCompressionToolsImageoptimPngcrushSmushit.com
  • Performance tuningStart-up latencyLazyloading/unloadingMemory/CPUManagementLocal CachingCodeoptimizationMediaCompression