> Is there some way to tell when a complex page has actually finished
drawing?
> I am trying to do some timing to see how much time various things
take in the SVG DOM. If I add, for example, 3000 text nodes
> using code like:
>
> try{suspendHandle = Root.suspendRedraw(1000000000000);}
> catch(e){}
> D0=(new Date()).valueOf()
> for (i=0;i<3000;i++)addNode("text")
> try{Root.unsuspendRedraw(suspendHandle);}
> catch(e){}
> D1=new Date().valueOf()
> display(D1)
To my knowledge, I'm not sure if this can ever be accomplished. Mixing
DOM element creation and events can introduce even more noise to this
kind of profiling.
Although the suspendRedraw/unsuspendRedraw were somehow useful for
many heavy operations, they don't seem to be properly implemented
around...
Anyway, I made a test file which can be of any use. I tested with
several SVG implementations (Firefox 2.0.3 and 3.0 alpha4, Opera 9.21,
Batik 1.7 beta1, IE7+ASV 6.0 beta, Renesis 0.7 and eSVG 2.4) and
obtained results vary a lot. A few thoughts on results:
-- Firefox 2 seems to be the simplest to understand (timings reveal
rendered occurs when expected);
-- Firefox 3 timings are completely reversed compared to Firefox 2
(DOM and/or rendering engine logics were probably redesigned);
-- Opera seems to make assumptions while the DOM is changed (total
time is spread over the three steps);
-- ASV doesn't properly handle the event queue timer so the rendering
time can't be (apparently) well measured (don't forget to edit the
script or else nothing will happen);
-- Batik seems to make some rendering assumptions during node creation
(measured time was about the same while in DOM operations and rendering);
-- Both Renesis and eSVG crash!
Few relevant notes are included in my test file (script comments and
document description). Sorry for the copy+paste mess up but I'm not
able to attach files:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink";
xmlns="http://www.w3.org/2000/svg";
contentScriptType="text/ecmascript" contentStyleType="text/css"
version="1.2" baseProfile="tiny"
width="800" height="600" viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
onload="init(evt)">
<title>Rendering speed</title>
<desc>
This is a performance test to measure how much time does a
rendering take.
Note that this test doesn't evaluate DOM performance only but also
ECMAScript binding.
Also note that rendering speed can be affected by many things:
-- In this case, you had to specify well defined text properties
to make sure one
implemetations don't, for example, simply assume default text
without stroke...
(which is pretty expensive from a rendering point of view).
-- Using random text placing can lead to varying results
(free portions of the screen can be - are really? -
optimized by the renderer)
References:
http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
</desc>
<script type="text/ecmascript"> <![CDATA[
var start = new Date();
var initFired, renderingFinished;
var svgNS = "http://www.w3.org/2000/svg";;
var timesRepeated = 3000;
var textContents = "text";
for (i = 0; i < timesRepeated; i++){
var textElement = document.createElementNS(svgNS, "text");
var textNode = document.createTextNode(textContents);
textElement.appendChild(textNode);
//set some properties to make it visible
//(or else the rendering engine may remove the elements from the
scene, showing false results)
textElement.setAttributeNS(null, "x", (Math.random() * 800));
textElement.setAttributeNS(null, "y", (Math.random() * 600));
document.documentElement.appendChild(textElement);
}
var endScript = new Date();
var result = function(){
renderingFinished = new Date();
alert(
"Time spent...\n\t" +
"scripting: " + (endScript.getTime() - start.getTime()) + "
ms\n\t" +
"initializing: " + (initFired.getTime() - endScript.getTime())
+ " ms\n\t" +
"rendering: " + (renderingFinished.getTime() -
initFired.getTime()) + " ms"
);
}
var init = function(evt) {
initFired = new Date();
//place in event queue
//(immediately called after rendering)
//setTimeout("result()", 0);//ASV needs a string - nevertheless,
it doesn't fire the event immediately after rendering
setTimeout(result, 0);
}
]]> </script>
</svg>
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
