benchmark.html
4.18 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html>
<head>
<title>Benchmarks</title>
<style type="text/css">
.fixed{
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
}
.abs {
position:absolute;
width:10px;
height:10px;
}
.absx1 { top:-100px; }
.absx2 { top:-1px; }
.absx3 { top:1px; }
.absx4 { bottom:1px; }
.absx5 { bottom:-100px; }
.absy1 { left:-100px; }
.absy2 { left:-1px; }
.absy3 { left:1px; }
.absy4 { right:1px; }
.absy5 { right:-100px; }
.ib,.fl{
width:500px;
height:500px;
}
.ib{
display:inline-block;
}
.fl{
float:left;
}
</style>
</head>
<body>
<h1>Benchmarks</h1>
<div id="results"></div>
<div id="fixed">
<div class="test-div abs absx1 absy1"></div>
<div class="test-div abs absx2 absy1"></div>
<div class="test-div abs absx3 absy1"></div>
<div class="test-div abs absx4 absy1"></div>
<div class="test-div abs absx5 absy1"></div>
<div class="test-div abs absx1 absy2"></div>
<div class="test-div abs absx2 absy2"></div>
<div class="test-div abs absx3 absy2"></div>
<div class="test-div abs absx4 absy2"></div>
<div class="test-div abs absx5 absy2"></div>
<div class="test-div abs absx1 absy3"></div>
<div class="test-div abs absx2 absy3"></div>
<div class="test-div abs absx3 absy3"></div>
<div class="test-div abs absx4 absy3"></div>
<div class="test-div abs absx5 absy3"></div>
<div class="test-div abs absx1 absy4"></div>
<div class="test-div abs absx2 absy4"></div>
<div class="test-div abs absx3 absy4"></div>
<div class="test-div abs absx4 absy4"></div>
<div class="test-div abs absx5 absy4"></div>
<div class="test-div abs absx1 absy5"></div>
<div class="test-div abs absx2 absy5"></div>
<div class="test-div abs absx3 absy5"></div>
<div class="test-div abs absx4 absy5"></div>
<div class="test-div abs absx5 absy5"></div>
</div>
<div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div>
<div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div>
<div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div>
<div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div>
<div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div><div class="test-div ib"></div>
<div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div>
<div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div>
<div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div>
<div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div>
<div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div><div class="test-div fl"></div>
<script src="jquery-1.10.2.min.js"></script>
<script src="../jquery.visible.js"></script>
<script>
var $divs = $('.test-div');
function run(partial,hidden,direction){
var start = Date.now();
var count = 0;
for (var i=0; i<100; i++){
$divs.each(function(){
$(this).visible(partial,hidden,direction);
count++;
});
}
var end = Date.now();
return 'Took '+(end-start)+' milliseconds to run visible('+Array.prototype.join.call(arguments,', ')+') '+count+' times.';
}
var results = [
run(),
run(true),
run(true,true),
run(false,true),
run(false,false,'vertical'),
run(false,false,'horizontal'),
run(true,false,'vertical'),
run(true,false,'horizontal')
];
$('#results').html(results.join('<br>'));
</script>
</body>
</html>