下面我们谈到的一个改进方法非常有用，当然也稍微麻烦一点。当需要创建元素然后将其插入树状的结构中时，将其直接插入到主干中效率更高----而不是首先将其插入大的子树，然后再将大的子树插入主干。例如，如果你创建一个每行有一列、列中有一些文字的表，你可以这样做：
1. 创建<TR>
2. 创建<TD>
3. 创建TextNode节点
4. 将TextNode 插入<TD>
5. 将<TD> 插入到 <TR>
6. 将<TR>插入到TBODY
当它要比下面的方法慢一些：
1. 创建<TR>
2. 创建<TD>
3. 创建TextNode
4. 将<TR> 插入到TBODY
5. 将<TD> 插入到<TR>
6. 将TextNode插入到<TD>
上面的四次测试使用的都是前一种方法。我们用后一种方法进行第5次测试。代码如下：
<html>
<body>
<script defer>
function init() {
var tbl, tbody, tr, td, text, i, max;
max = 1000;
var theDoc = document;
var theBody = theDoc.body;
tbl = theDoc.createElement("TABLE");
tbl.border = "1";
tbody = theDoc.createElement("TBODY");
tbl.insertBefore(tbody, null);
theBody.insertBefore(tbl, null);
for (i=0; i<max; i++) {
tr = theDoc.createElement("TR");
td = theDoc.createElement("TD");
text = theDoc.createTextNode("Text");
tbody.insertBefore(tr, null);
tr.insertBefore(td, null);
td.insertBefore(text, null);
}
}
</script>
</body>
</html>
View the fifth sample.
Test5只需1649ms。这比上次测试提高了25%，比基线快了几乎30%。
随后的修改是使用了预制的样式表。使用了预制样式表的表格列宽或者是通过<COL>标签设置，没有<COL>标签时，每列的宽度均匀分布。因为不需要对每一列重新计算大小等，使用样式表实际上提高了性能，尤其当表格中的列数很多时。
增加样式表(CSS)的代码非常简单，如下：
tbl.style.tableLayout = "fixed";
View the sixth sample.
因为我们测试中的表格只有一列，这种改变只提高了页面1.6%的性能。如果有更多的列，性能增加会更多。
最后两次测试改变了将文字插入到表格中的方法。前面的测试中，我们都先创建一个TextNode ,然后将其插入到TD中。在Test7中, 取而代之，我们通过innerText 指定包含的文字。修改的代码是：
td.innerText = "Text";
View the seventh sample.
令人惊奇的是，这次修改产生的差异很大----比上次提高了9%的性能，比最初总共提高了36%的性能。时间从最初的2323ms到最后的1473ms。
现在，几乎人人都知道使用element.innerHTML 非常慢. 为了看看究竟它如何慢，我做了最后一次测试：使用 innerHTML替代innerText插入文字。这大大降低了性能。时间达到3375ms,比上次测试慢了80%，比基线测试慢了45%。显然，innerHTML是非常耗时的。
调整HTML页面性能类似于调整Win32应用程序性能；需要知道什么慢，什么快。希望这些方法能帮你提高页面性能。
您可能感兴趣的文章: