forked from ecomfe/zrender
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathperformance.html
128 lines (126 loc) · 4.87 KB
/
performance.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Performance</title>
<script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
<div id="main" style="width:100%;height:400px;border:1px solid green"></div>
<div>
<input id="round" value="10"/>次
<input id="count" value="1000"/>个图形
<select id='shape'>
<option value='circle'>circle</option>
<option value='sector'>sector</option>
<option value='ring'>ring</option>
<option value='ellipse'>ellipse</option>
<option value='rectangle'>rectangle</option>
<option value='text'>text</option>
<option value='heart'>heart</option>
<option value='droplet'>droplet</option>
<option value='line'>line</option>
<option value='image'>image</option>
<option value='star'>star</option>
<option value='isogon'>isogon</option>
</select>
<button id='run' onclick="start()">start</button>
</div>
<div id="res">loading</div>
<script type="text/javascript">
require.config({
packages: [
{
name: 'zrender',
location: '../src',
main: 'zrender'
}
]
});
var t1 = 0;
var t2 = 0;
var t3 = 0;
var zr;
var isRunning = true;
var zrColor;
var width;
var height;
var round;
var n;
var result;
var total;
var shapeType;
function start() {
if (isRunning) {
return;
}
isRunning = true;
document.getElementById('res').innerHTML += 'running ';
round = document.getElementById('round').value;
n = document.getElementById('count').value;
result = [];
total = 0;
shapeType = document.getElementById('shape').value;
setTimeout(run,50);
}
function run(){
if (round--) {
zr.clear();
for (var i = 0; i < n; i++) {
zr.addShape({
shape: shapeType,
style: {
x: Math.round(Math.random() * width),
y: Math.round(Math.random() * height),
r0: Math.round(Math.random() * 10),
r: shapeType != 'rose'
? Math.round(Math.random() * 30)
: [5 + Math.round(Math.random() * 5),
10 + Math.round(Math.random() * 5),
15 + Math.round(Math.random() * 5)],
n: Math.round(Math.random() * 10 + 2),
a: Math.round(Math.random() * 10),
b: Math.round(Math.random() * 30),
k: Math.round(Math.random() * 10),
width: Math.round(Math.random() * 100),
height: Math.round(Math.random() * 50),
xStart: Math.round(Math.random() * width),
yStart: Math.round(Math.random() * height),
xEnd: Math.round(Math.random() * width),
yEnd: Math.round(Math.random() * height),
startAngle : Math.round(Math.random() * 30),
endAngle: Math.round(Math.random() * 180) + 30,
image : 'test.jpeg',
text : shapeType == 'text' ? 'zrender' : '',
color: zrColor.random()
},
hoverable : false
});
}
var ticket = new Date();
zr.render();
ticket = new Date() - ticket;
total += ticket
result.push(ticket);
setTimeout(run,50);
}else {
isRunning = false;
document.getElementById('res').innerHTML +=
n + '个' + shapeType +
'平均render时间:' + Math.round(total/result.length)
+ 'ms : [' + result.join(',') + ']<br/>';
console.log(t1, t2, t3); t1 = 0; t2 = 0; t3 = 0;
}
}
require(["zrender"], function(zrender){
// 初始化zrender
zr = zrender.init(document.getElementById("main"));
zrColor = require('zrender/tool/color');
width = zr.getWidth();
height = zr.getHeight();
isRunning = false;
document.getElementById('res').innerHTML = 'ready!<br/>'
})
</script>
</body>
</html>