Alex: > The question is: what is the most efficient representation of FXG/SVG on > the JS side? Should it be SVG markup, or data structures that you can use > to call the createElementNS/setAttributes in a loop? Or just linear JS > code making those calls? We stopped using linear AS code for MXML codegen > because it is faster/smaller to generate a data structure and run a loop > where the JIT-compilation is re-used. >
I did some performance benchmarks on the two ways to draw SVG using JS. The tests and the results are available here: http://jsperf.com/various-ways-of-drawing-svg-in-js The Pure JS method looks like this: var Rect = function(x, y, h, w, fill) { var NS = "http://www.w3.org/2000/svg";; var SVGObj = document.createElementNS(NS, "rect"); SVGObj.width.baseVal.value = w; SVGObj.height.baseVal.value = h; SVGObj.setAttribute("x", x); SVGObj.setAttribute("y", y); SVGObj.style.fill = fill; return SVGObj; } The closest to a "SVG.innerSVG" would be using the DOMParser() to parse a SVG element xml and generate a DOM object out of it. The method looks like this: var domparser = new DOMParser(); var RectXML = function(x, y, w, h, fill) { var rectElement = domparser.parseFromString( '<rect xmlns="http://www.w3.org/2000/svg"; x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" style="fill:' + fill + '"/>', 'image/svg+xml'); return rectElement.documentElement; } Running these two tests side by side, the pure JS method is much much faster than the DOMParser() method. The Pure JS method using the document.createElementNS() is clearly the favorite here. Alex, did you have any other technique in mind for us to performance test? I wasnt quite sure how to do the "data structures" way. Do you want to share a working snippet? Thanks, Om
