WEB开发网
开发学院网页设计JavaScript Javascript动态生成表格的性能调优 阅读

Javascript动态生成表格的性能调优

 2010-09-14 13:09:03 来源:WEB开发网   
核心提示: vision 0.6 【耗时2580ms】这个版本中我们要调优的是修改table的css属性,使用fixed-table布局(layout),Javascript动态生成表格的性能调优(6),指定了fixed-table布局后的表格的列宽使用<col>标签设置,fixed-ta

vision 0.6 【耗时2580ms】

这个版本中我们要调优的是修改table的css属性,使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用<col>标签设置。

fixed-table布局样式将改善table的性能,因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法,特别是那些有很多列的大型表格。

这个操作也可以通过简单增加css样式实现:

<html>
<body onload="init()">
<script defer>
function init() {
 var _table, _tbody, tr, td, text, maxRow, maxCol;
 var docBody = document.body;
 var _doc = document;
 maxRow = 3000;
 maxCol = 8;
 
 _table = _doc.createElement("table");
 _table.border = "1";
 _table.style.tableLayout = "fixed";
 _tbody = _doc.createElement("tbody");
 _table.insertBefore(_tbody, null);
 docBody.insertBefore(_table, null);
 
 for (var i=0; i<maxRow; i++) {
 tr = _doc.createElement("tr");
  _tbody.insertBefore(tr, null);
 for(var j = 0; j<maxCol; j++){
  td = _doc.createElement("td");
  text = _doc.createTextNode("Text");
  td.insertBefore(text, null);
  tr.insertBefore(td, null);
 }
 }
}
</script>
</body>
</html>

vision 0.7 【耗时2210ms】

上一页  1 2 3 4 5 6 7  下一页

Tags:Javascript 动态 生成

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接