score:0
performance will usually be lower on mobile devices than on desktop kit. in general their hardware is less powerful (it's geared more towards low power consumption than outright speed) and they have a hell of a lot less ram and storage to play with. chrome on my desktop has multiple processors, 8gb ram and a ludicrously powerful gpu at it's disposal. on my ipad it doesn't have anywhere near that level of power.
3rd party ios applications (including chrome) cannot use nitro, that much is correct. i believe this is because nitro is able to mark memory as executable and (for security reasons) 3rd party applications are not trusted to do that. most html5 stuff will work in any browser on ios (with the possible exception of opera mini). canvas and svg animation will be slower than in safari because it's all driven by javascript - again the lack of access to nitro holds them back. this is no longer true: as of ios 8 third party apps can now use the wkwebview
framework which does have access to the same high speed javascript engine as safari.
native code will usually be faster because it's much closer to the hardware, hitting the display apis directly, rather than going through the web stack.
the solution is usually to simplify everything. in the same way that native game developers had to massively reduce the complexity of their 3d games to make them work on ios devices, so web developers have to reduce the complexity of their svgs and canvas apps. less stuff flying around the page means higher performance, in general.
there's a number of tricks you can do, and a lot of reading around the subject. have a read of http://www.html5rocks.com/en/tutorials/canvas/performance/, http://www.html5gamedevs.com/tag/performance/, and the rest of google. personally i'd build a proof of concept and test it before completely abandoning the idea :)
score:3
i found d3.js/svg on my first gen ipad massively slower than running the same app on desktop browsers (ff/chrome/ie 9+).
i wrote up the various improvements i attempted here: http://hivemindmap.blogspot.co.uk/2013/01/html5-and-interactive-graphs.html
score:7
ios7 has notably bad performance animating svg with javascript - although static svg drawing is massively faster. we wrote a blog on the performance of the ios7 release, which you can see for more gory details.
update: ios7.1 fixed the javascript animation performance problem. it's back to 50 fps
Source: stackoverflow.com
Related Query
- State of SVG Performance on iOS and other Tablets?
- Is there a performance difference between SVG attributes and styles?
- Loading a huge image (5mb) into svg background leads to pixelation and performance issues
- Axis and svg text elements hide each other
- how to set collision between nodes and other svg element in D3.js
- How to get the id of svg that was draw over other svg and delete it
- d3 SVG translate and scale one group but only translate the other
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- Testing d3 (and other SVG based) Web Applications
- Difference between svg and canvas in d3.js
- Recording and saving an SVG animation as an animated GIF
- Auto width and height for SVG image
- Append SVG canvas to element other than body using D3
- D3 - Difference between basis and linear interpolation in SVG line
- D3 how to change the width and length of SVG
- Making SVG container 100% width and height of parent container in D3 v4 (instead of by pixels)
- StopPropagation() with SVG element and G
- Modifying SVG path opacity and it's marker
- cx, cy vs transform in svg and D3, what is the difference?
- Convert SVG to PNG and maintain CSS integrity
- IE11 does not accept SVG height and width when using D3
- Creating scrollbars with SVG and d3.js
- IOS app webview SVG ClipPath Issue
- D3 map SVG performance
- D3, SVG and textPath: How to move the text down?
- Is it possible to set custom attributes of SVG objects as number and not as string?
- Edge does not handle scaling and text-anchor:middle correctly in svg
- Custom context menu in d3 and svg
- Resizeable SVG elements with JavaScript and D3
- Where can I get the .geojson file for India and not separate files for each state/territory or any other distinction?
More Query from same tag
- How can I zoom multiple lines with multiple series in D3.js Chart?
- Appending SVG Elements in D3
- Enable scroll on the axis of D3 chart
- How to properly use call() in D3 to bind drag behavior?
- d3.js TypeError null is not and object Geojson
- D3 js selecting rectangles in
- D3 Noob: Cannot bind to data read from csv file
- How to work with CSV data in D3
- How to use d3.scaleLinear to find the radius of a map in d3
- div element is getting appended outside the body
- Adding Dynamic Node in D3 Tree
- How to mark discrete points on a time series graph using D3 / Rickshaw?
- why node class 'selected' disappeared after brushend in d3
- Scattered Plot with force layout
- Adding an image with C3.js
- d3 js time axis ticks slightly off / skewed /moved
- On click event seemingly not over the whole element
- Error Cannot read property 'getBoundingClientRect' of null in d3-gantt charts
- Transitioning Text in D3
- d3js: How does the "magic" work with fill on hover for a barchart plot?
- How can I change the white space between spans when adding them programmatically?
- d3.js append element to node depends on entity
- Color range for multiple lines
- Adding new paths to D3 Globe
- How to transform an array
- D3js Appending Duplicate Data to SVG When ".enter()" Selection Should Be Empty
- Remove current element based on data availability in D3.js
- Voronoi cells fill function with D3 (v4)
- Sum of multiple column values for each row in d3.js
- Required Help in adding data labels to histogram - d3