
|
If you were logged in you would be able to see more operations.
|
|
|
| Severity: |
Major
|
| Fixed in Change#: |
5,217
|
| Runtime: |
N/A
|
| Fix in hand: |
False
|
|
We use LzDrawView as part of a whiteboard. Using stretches="both" causes conceptual complications, so I began looking into what it would take to redrawing the whiteboard objects whenever the whiteboard area changes (window resizing/magnification).
With my test script (below) I rapidly ran into terrible performance problems which hung the browser (all Firefox) very easily.
I record the time required for the line generation function to execute, and this is acceptable. This time, however, is not in relation to the actual time needed to complete the rendering of the line... nor does it give an impression for how dramatic the slowdown to all aspects of the laszlo applicatioin become (e.g. try dragging a window when you have drawn a line with 100 odd points).
Here are some sample timings (not many points as it doesn'T take long to crash) from two machines :
(generate time is just the generation of the list of random x,y points)
points generate_time render_time time_per_point
6 0 15 2
11 0 0 0
16 0 15 0.9375
21 0 16 0.761904761904762
26 15 16 0.615384615384615
31 0 32 1.03225806451613
36 0 31 0.861111111111111
41 0 47 1.14634146341463
46 0 109 2.3695652173913
51 0 62 1.2156862745098
56 0 62 1.10714285714286
61 0 63 1.0327868852459
66 0 94 1.42424242424242
71 16 125 1.76056338028169
MACHINE 2 :
6,10,0,0
11,0,10,0.909090909090909
16,0,10,0.625
21,0,20,0.952380952380952
26,0,20,0.769230769230769
31,10,10,0.32258064516129
36,10,20,0.555555555555556
41,0,30,0.731707317073171
46,0,30,0.652173913043478
51,10,40,0.784313725490196
56,10,40,0.714285714285714
61,0,30,0.491803278688525
66,10,20,0.303030303030303
71,10,20,0.28169014084507
76,20,20,0.263157894736842
81,20,30,0.37037037037037
86,40,100,1.16279069767442
91,20,30,0.32967032967033
96,40,100,1.04166666666667
101,0,110,1.08910891089109
Here is the test code :-----------------------------------------------------------------------------------------------------------------------------------------------
<canvas debug="true">
<!--
Test redrawing code (and speed) by taking generated objects contrasting between resize and redraw.-->
<!-- test with an increasing number of points.... measure the time taken -->
<method name="generate_path" args="viewport,no_of_points">
<![CDATA[
//var start=(new Date()).getTime();
//Debug.write("generating "+no_of_points+ "points");
var line=new Array();
var x=0;
var y=0;
for (var i=0;i<no_of_points;i++){
x=Math.random()*viewport.width;
y=Math.random()*viewport.height;
//obj
line.push(x);
line.push(y);
}
var obj={type:"line",obj:line,vp_width:viewport.width,vp_height:viewport.height};
return(obj);
]]>
</method>
<method name="draw_line" args="target_view,line">
<![CDATA[
l=new LzDrawView(target_view,{linewidth:2});
for (var i=0;i<(line.obj.length);i+=2){
l.lineTo(line.obj[i],line.obj[i+1]);
l.stroke();
}
return(l);
]]>
</method>
<window name="redraw" width="300" height="300">
<view name="inside" width="${immediateparent.width}" height="${immediateparent.height}"/>
</window>
<!--
<window name="stretch" width="300" height="300" x="400" resizable="true">
<view name="inside" stretches="both" width="${immediateparent.width}" height="${immediateparent.height}"/>
</window>
-->
<button>
<attribute name="i" value="1"/>
<attribute name="l"/>
<!-- is the problem the total number of LzView objects? -->
<method event="oninit">
Debug.write("points,generate_time,render_time,time_per_point");
</method>
<method event="onclick">
<![CDATA[
this.l.destroy();
i=this.i+5;
var generate_line_start=(new Date()).getTime();
line=canvas.generate_path(canvas.redraw,i);
var generate_line_end=(new Date()).getTime();
var generate_time=generate_line_end-generate_line_start;
var render_line_start=(new Date()).getTime();
this.l=canvas.draw_line(canvas.redraw.inside,line);
var render_line_end=(new Date()).getTime();
var render_time=render_line_end-render_line_start;
Debug.write(i+","+generate_time+","+render_time+","+render_time/i);
//canvas.draw_line(canvas.stretch.inside,line);
]]>
</method>
</button>
</canvas>
|
|
Description
|
We use LzDrawView as part of a whiteboard. Using stretches="both" causes conceptual complications, so I began looking into what it would take to redrawing the whiteboard objects whenever the whiteboard area changes (window resizing/magnification).
With my test script (below) I rapidly ran into terrible performance problems which hung the browser (all Firefox) very easily.
I record the time required for the line generation function to execute, and this is acceptable. This time, however, is not in relation to the actual time needed to complete the rendering of the line... nor does it give an impression for how dramatic the slowdown to all aspects of the laszlo applicatioin become (e.g. try dragging a window when you have drawn a line with 100 odd points).
Here are some sample timings (not many points as it doesn'T take long to crash) from two machines :
(generate time is just the generation of the list of random x,y points)
points generate_time render_time time_per_point
6 0 15 2
11 0 0 0
16 0 15 0.9375
21 0 16 0.761904761904762
26 15 16 0.615384615384615
31 0 32 1.03225806451613
36 0 31 0.861111111111111
41 0 47 1.14634146341463
46 0 109 2.3695652173913
51 0 62 1.2156862745098
56 0 62 1.10714285714286
61 0 63 1.0327868852459
66 0 94 1.42424242424242
71 16 125 1.76056338028169
MACHINE 2 :
6,10,0,0
11,0,10,0.909090909090909
16,0,10,0.625
21,0,20,0.952380952380952
26,0,20,0.769230769230769
31,10,10,0.32258064516129
36,10,20,0.555555555555556
41,0,30,0.731707317073171
46,0,30,0.652173913043478
51,10,40,0.784313725490196
56,10,40,0.714285714285714
61,0,30,0.491803278688525
66,10,20,0.303030303030303
71,10,20,0.28169014084507
76,20,20,0.263157894736842
81,20,30,0.37037037037037
86,40,100,1.16279069767442
91,20,30,0.32967032967033
96,40,100,1.04166666666667
101,0,110,1.08910891089109
Here is the test code :-----------------------------------------------------------------------------------------------------------------------------------------------
<canvas debug="true">
<!--
Test redrawing code (and speed) by taking generated objects contrasting between resize and redraw.-->
<!-- test with an increasing number of points.... measure the time taken -->
<method name="generate_path" args="viewport,no_of_points">
<![CDATA[
//var start=(new Date()).getTime();
//Debug.write("generating "+no_of_points+ "points");
var line=new Array();
var x=0;
var y=0;
for (var i=0;i<no_of_points;i++){
x=Math.random()*viewport.width;
y=Math.random()*viewport.height;
//obj
line.push(x);
line.push(y);
}
var obj={type:"line",obj:line,vp_width:viewport.width,vp_height:viewport.height};
return(obj);
]]>
</method>
<method name="draw_line" args="target_view,line">
<![CDATA[
l=new LzDrawView(target_view,{linewidth:2});
for (var i=0;i<(line.obj.length);i+=2){
l.lineTo(line.obj[i],line.obj[i+1]);
l.stroke();
}
return(l);
]]>
</method>
<window name="redraw" width="300" height="300">
<view name="inside" width="${immediateparent.width}" height="${immediateparent.height}"/>
</window>
<!--
<window name="stretch" width="300" height="300" x="400" resizable="true">
<view name="inside" stretches="both" width="${immediateparent.width}" height="${immediateparent.height}"/>
</window>
-->
<button>
<attribute name="i" value="1"/>
<attribute name="l"/>
<!-- is the problem the total number of LzView objects? -->
<method event="oninit">
Debug.write("points,generate_time,render_time,time_per_point");
</method>
<method event="onclick">
<![CDATA[
this.l.destroy();
i=this.i+5;
var generate_line_start=(new Date()).getTime();
line=canvas.generate_path(canvas.redraw,i);
var generate_line_end=(new Date()).getTime();
var generate_time=generate_line_end-generate_line_start;
var render_line_start=(new Date()).getTime();
this.l=canvas.draw_line(canvas.redraw.inside,line);
var render_line_end=(new Date()).getTime();
var render_time=render_line_end-render_line_start;
Debug.write(i+","+generate_time+","+render_time+","+render_time/i);
//canvas.draw_line(canvas.stretch.inside,line);
]]>
</method>
</button>
</canvas>
|
Show » |
|