/
biggrid.html
141 lines (126 loc) · 3.82 KB
/
biggrid.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
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE HTML>
<html>
<head>
<title>Grid Rendering Benchmarks</title>
<script type="text/javascript" src="scripts/redraw.js"></script>
<style type="text/css">
table {
table-layout: fixed;
border-collapse: separate;
}
.table-cell {
width: 75px;
border: 1px solid Gray;
}
.table-row {
height: 16px;
}
.row {
white-space: nowrap;
}
.inline-cell {
border: 1px solid Gray;
display: inline-block;
width: 75px;
height: 16px;
}
.absolute-cell {
border: 1px solid Gray;
position: absolute;
width: 75px;
height: 16px;
}
.column-div {
width: 75px;
border: 1px solid Gray;
display: inline-block;
}
#container {
position: relative;
white-space: nowrap;
}
</style>
</head>
<body>
<div>Rendering large grids with progressive rendering (50 rows at a time)</div>
FPS: <span id="fps"></span>
Elapsed: <span id="elapsed"></span>
Rows: <input type="text" id="rows" value="10000"/>
Columns: <input type="text" id="columns" value="25"/>
Text weight:<input type="text" id="text-weight" value="8" style="width:20px;"/>
<select id="rendering">
<option value="table">Table</option>
<option value="inline">Inline-block divs</option>
<option value="absolute">Absolute divs</option>
<option value="single-column">Single Column Divs</option>
</select>
Overflow:hidden<input id="overflow" type="checkbox"/>
<button onclick="renderOnce()">Render At Once</button>
<button onclick="renderProgressively()">Render Progressively</button>
<button onclick="clearHtml()">Clear</button>
<script type="text/javascript">
function renderOnce() {
updateOverflow();
getRenderer()(document.getElementById('container'),
parseInt(document.getElementById('rows').value, 10),
parseInt(document.getElementById('columns').value, 10),
parseInt(document.getElementById('text-weight').value, 10));
}
var CHUNK_SIZE = 50;
function renderProgressively() {
var fpsDiv = document.getElementById('fps');
var elapsedDiv = document.getElementById('elapsed');
var container = document.getElementById('container');
var rows = parseInt(document.getElementById('rows').value, 10);
var cols = parseInt(document.getElementById('columns').value, 10);
var textWeight = parseInt(document.getElementById('text-weight').value, 10);
updateOverflow();
var renderFn = getRenderer();
var start = new Date().getTime();
var renderer = function() {
var div = document.createElement('div');
container.appendChild(div);
renderFn(div, Math.min(rows, CHUNK_SIZE), cols, textWeight);
rows -= CHUNK_SIZE;
var done = rows <= 0;
elapsedDiv.style.backgroundColor = done ? 'green' : '';
elapsedDiv.innerHTML = done ?
(new Date().getTime()) - start + 'ms' : '';
return !done;
};
renderInLoop(fpsDiv, renderer);
}
function getRenderer() {
var select = document.getElementById('rendering');
var type = select.options[select.selectedIndex].value;
switch (type) {
case 'inline':
return renderInlineBlockGrid;
case 'absolute':
return renderAbsoluteGrid;
case 'table':
return renderTable;
case 'single-column':
return renderSingleColumnDivs;
}
throw Error('No renderer');
}
function clearHtml() {
document.getElementById('container').innerHTML = '';
}
var styleNode;
function updateOverflow() {
if (styleNode) {
removeNode(styleNode);
}
var overflowHidden = document.getElementById('overflow').checked;
if (overflowHidden) {
styleNode = document.createElement('style');
styleNode.innerText = '.table-cell{overflow:hidden}';
document.body.appendChild(styleNode);
}
}
</script>
<div id="container"></div>
</body>
</html>