/
2008-12-05-ajax-grid-performance-in-ie.html
117 lines (80 loc) · 4 KB
/
2008-12-05-ajax-grid-performance-in-ie.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
---
title: Ajax grid performance in IE
tags: performance javascript
---
<p>Generating a grid (table) view from the results of an Ajax call is a common Web 2.0 use case. But performance can be an issue, especially on IE7.</p>
<p>Let's look at an example without the actual Ajax part; just generating a table and inserting it into the DOM. Here is a naive implementation:</p>
<pre name="code" class="js">
<script src="prototype.js" type="text/javascript"></script>
<SCRIPT>
var MAX_ROWS = 500;
var MAX_COLS = 20;
function populate() {
var tableDom = new Element("table");
var tableBodyDom = new Element("tbody");
for (var row = 0; row < MAX_ROWS; row++) {
var rowDom = new Element("tr");
for (var col = 0; col < MAX_COLS; col++) {
var colDom = new Element("td");
colDom.innerHTML = row + ":" + col;
rowDom.appendChild(colDom);
}
tableBodyDom.appendChild(rowDom);
}
tableDom.appendChild(tableBodyDom);
$("grid").appendChild(tableDom);
}
function populateTimer() {
var start = new Date().getTime();
populate();
$("info").update(new Date().getTime() - start + "ms");
}
Event.observe(window, "load", populateTimer);
</SCRIPT>
<DIV id="info">
</DIV>
<DIV id="grid">
</DIV>
</pre>
Results:
<ul>
<li>Firefox - 1660ms</li>
<li>Chrome - 446ms</li>
<li>IE7 - 6906ms</li>
</ul>
<p>Constructing the table with via the DOM is fairly slow, especially on IE. This is well documented at <a href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a>. So, let's try an innerHTML implementation:</p>
<pre name="code" class="js">
function populate() {
var tableHtmlArr = ["<TABLE>"];
for (var row = 0; row < MAX_ROWS; row++) {
tableHtmlArr.push("<TR>");
for (var col = 0; col < MAX_COLS; col++)
tableHtmlArr.push("<TD>" + row + ":" + col + "</TD>");
tableHtmlArr.push("</TR>");
}
tableHtmlArr.push("</TABLE>");
$("grid").innerHTML = tableHtmlArr.join("");
}
</pre>
Results:
<ul>
<li>Firefox - 315ms</li>
<li>Chrome - 108ms</li>
<li>IE7 - 360ms</li>
</ul>
<p>So far so good. IE7 is actually pretty fast at concatenating all this HTML and displaying it. IE8beta2 is even better. So, why is this post titled "Ajax grid performance in <i>IE</i>"?</p>
<p>Let's try one more test. What if we insert more layout elements into the grid? In this implementation, I have just wrapped each cell in five nested DIVs. (This is an extreme example, but it's not hard to imagine some rich formatting in those cells.)</p>
<pre name="code" class="js">
for (var col = 0; col < MAX_COLS; col++)
tableHtmlArr.push("<TD><DIV></DIV></DIV></DIV></DIV>" + row + ":" + col + "</DIV></DIV></DIV></DIV></DIV></TD>");
</pre>
Results:
<ul>
<li>Firefox - 540ms</li>
<li>Chrome - 272ms</li>
<li>IE7 - 2734ms</li>
</ul>
<img src="http://spreadsheets.google.com/pub?key=puWyFEiJ_0iA6ADIJhaSNaw&oid=1&output=image" style="float: right; margin: 20px;"/>
<p>As you can see, the performance in IE7 degrades dramatically as the complexity of the HTML increases. If you put a timer before the innerHTML setter, you will see that the time increase to that point is negligible. It's actually not a javascript performance problem at all; it's DOM insertion performance!</p>
<p>The IE8 team has actually <a href="http://blogs.msdn.com/ie/archive/2008/08/26/ie8-performance.aspx">blogged about this</a>. They estimate that fully 70% of the browser cycles are dedicated to either "Layout" or "Rendering" on real world applications.</p>
<p>Even worse, it's not getting better on IE8. This test actually gets slower on IE8beta2. My hypothesis is that all the work they are doing to increase their Acid2 score (while maintaining a backwards compatibility mode) is actually slowing down their rendering performance.</p>