WPF/E初步印象(测试代码）

最新推荐文章于 2025-08-10 23:51:42 发布

firefight

最新推荐文章于 2025-08-10 23:51:42 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：测试 performance null function html div

本文链接：https://blog.youkuaiyun.com/firefight/article/details/1487368

本文通过创建大量矩形对象的方式，对比了WPF/E和SVG两种技术在渲染性能上的表现。测试中使用JavaScript来控制图形的生成，并记录渲染时间，以评估不同技术在图形渲染效率上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WPF/E HTML

<head><title>"WPF/E" CTP (December 2006) - Performance Test</title>

.playerDiv {

top: 0px;

left: 0px;

}

.body {

background: #AFCBE6;

}

</style>

</head>

new agHost("wpfeControlHost1", // hostElementID (HTML element to put WPF/E

"wpfeControl1", // ID of the WPF/E ActiveX control we create

"100%", // Width

"80%", // Height

"#FFFFFFFF", // Background color

null, // SourceElement (name of script tag containing xaml)

"PerformanceTest.xaml", // Source file

"false", // IsWindowless

"30", // MaxFrameRate

null // OnError handler

);

</script>

</div>

<div id="performance" style="background:yellow; width: 600px; height: 20px" >result</div></body>

</html>

WPF/E脚本(PerformanceTest.js)

// Define global variables.

var control, mainCanvas;

var row = 30, col = 30;

// Set global variables for the WPF/E control and main Canvas objects.

function onLoaded(sender) {

control = document.getElementById("wpfeControl1");

mainCanvas = sender;

}

function beginRender() {

var result = document.getElementById("performance");

mainCanvas.children.clear();

var beginTime = new Date();

var xamlFragment = '<Rectangle Width="10" Height="10" Stroke="Black" Fill="Blue"/>';

var r = new Array();

var rindex = 0;

for(var i=0; i<row; i++)

{

for(var j=0; j<col; j++)

{

rindex = r.length;

r[rindex] = control.createFromXaml(xamlFragment);

r[rindex]["Canvas.Left"] = j*12;

r[rindex]["Canvas.Top"] = i*12;

//mainCanvas.children.add(r[rindex]);

}

for(var i=0; i<r.length; i++)

mainCanvas.children.add(r[i]);

var endTime = new Date();

var spendTime = endTime.getTime() - beginTime.getTime();

result.innerHTML = beginTime.toString() + "-- Create " + row + "*" + col +" rects spends " + spendTime + "ms.";

}

XAML文件(PerformanceTest.xaml)

<Canvas xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="800" Width="600" Background="PowderBlue" Loaded="javascript:onLoaded">

</Canvas>

SVG HTML

<head><title>SVG - Performance Test</title>

.playerDiv {

top: 0px;

left: 0px;

}

.body {

background: #AFCBE6;

}

</style>

</head>

<div id="performance" style="background:yellow; width: 600px; height: 20px" >result</div>

</body>

</html>

SVG 脚本(PerformanceTest.js)

// Define global variables.

var control, svgRoot, mainCanvas = null;

var svgns = "http://www.w3.org/2000/svg";

var row = 100, col = 100;

function createMainCanvas()

{

mainCanvas = control.createElementNS(svgns, "g");

svgRoot.appendChild(mainCanvas);

}

function beginRender()

{

var result = document.getElementById("performance");

if(mainCanvas != null)

svgRoot.removeChild(mainCanvas);

createMainCanvas();

var beginTime = new Date();

var r = new Array();

var rindex = 0;

for(var i=0; i<row; i++)

{

for(var j=0; j<col; j++)

{

rindex = r.length;

r[rindex] = control.createElementNS(svgns, "rect");

r[rindex].setAttributeNS(null, "x", j*12);

r[rindex].setAttributeNS(null, "y", i*12);

r[rindex].setAttributeNS(null, "width", 10);

r[rindex].setAttributeNS(null, "height", 10);

r[rindex].setAttributeNS(null, "stroke", "black");

r[rindex].setAttributeNS(null, "fill", "blue");

//mainCanvas.appendChild(r[rindex]);

}

for(var i=0; i<r.length; i++)

mainCanvas.appendChild(r[i]);

var endTime = new Date();

var spendTime = endTime.getTime() - beginTime.getTime();

result.innerHTML = beginTime.toString() + "-- Create " + row + "*" + col +" rects spends " + spendTime + "ms.";

}

SVG 文件(PerformanceTest.svg)

function onLoaded(evt)

{

parent.control = evt.target.ownerDocument;

parent.svgRoot = parent.control.documentElement;

}

]]></script>

</svg>