数据由 json 返回var d={fields:["id","name","sex","age"],datas:[
["1001","张飞","男","21"],
["1002","吕布","男","21"],
["1003","赵云","男","21"],
["1004","曹操","男","21"],]};而具体创建table，有多种方法，例如 appendChild, insertrow, innerHTML, insertAdjustHTML 等，求最高速的方法另外，如果这样将全部数据储存在 var d 中，再生成table，会不会造成双倍的内存开销？毕竟json是服务端输出的，是否由服务端直接输出table会开销少一点？服务端生成页面和客户端生成页面 在大数据面前哪一个更有效？？？
["1001","张飞","男","21"],
["1002","吕布","男","21"],
["1003","赵云","男","21"],
["1004","曹操","男","21"],]};而具体创建table，有多种方法，例如 appendChild, insertrow, innerHTML, insertAdjustHTML 等，求最高速的方法另外，如果这样将全部数据储存在 var d 中，再生成table，会不会造成双倍的内存开销？毕竟json是服务端输出的，是否由服务端直接输出table会开销少一点？服务端生成页面和客户端生成页面 在大数据面前哪一个更有效？？？
客户端生成页面，对客户端要求高点LZ要权衡利弊，根据自己的情况（服务器性能、网速、客户端性能等等），再作决定
建议采用innerHTML方法，先拼接HTML进数组，再join()后一次性innerHTML到窗口，切忌反复DOM渲染。CSDN有个叫梅子(meizi)的，去看看他（她）的BLOG ...
多不了什么开销， 如果开销大放到客户端一样要大开销的处理不如在输出时就直接处理
http://topic.csdn.net/u/20090702/09/8cc31925-8cea-433c-bc36-01d5de36ff0c.html里面给出了一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head><body>
<div id="test1"></div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<input type="button" onclick="appendTest()" value="testAppendChild"><script type="text/javascript">
<!--
function innerTest(){
var t1=(new Date()).getTime();
var a="<b>xxxxxxxx</b>";
var b=document.getElementById("test1");
for(var i=0;i<500;i++){
b.innerHTML+=a;
}
t2 = (new Date()).getTime();
alert(t2-t1);
}function appendTest(){
var t1=(new Date()).getTime();
var b=document.getElementById("test2");
for(var i=0;i<500;i++){
var a=document.createElement("b");
a.appendChild(document.createTextNode("xxxxxxxx"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
alert(t2-t1);
}
//-->
</script>
</body>
</html>
如果你根据上面的例子就认为appendChild比innerHTML快，那你就错了，再看我修改过的这个例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head><body>
<div id="test1"></div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<input type="button" onclick="appendTest()" value="testAppendChild"><script type="text/javascript">
<!--
function innerTest(){
var t1=(new Date()).getTime();
var a="<b>xxxxxxxx</b>";
var arr = [];
var b=document.getElementById("test1");
for(var i=0;i<500;i++){
arr.push(a);
}
b.innerHTML += arr.join("");
t2 = (new Date()).getTime();
alert(t2-t1);
}function appendTest(){
var t1=(new Date()).getTime();
var b=document.getElementById("test2");
for(var i=0;i<500;i++){
var a=document.createElement("b");
a.appendChild(document.createTextNode("xxxxxxxx"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
alert(t2-t1);
}
//-->
</script>
</body>
</html>
最后给你写一个相对比较快速的table 创建代码，自己改造着用吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
var d = {
fields:["id","name","sex","age"],
datas:[
["1001","张飞","男","21"],
["1002","吕布","男","21"],
["1003","赵云","男","21"],
["1004","曹操","男","21"]
]
}; var arrD = d.datas;for(var i=0;i<10000;i++){
arrD.push([i,"test","test","test"]);
}//这是一个相对比较快速的 table 创建方法：
/*
要点1，用array 的join方法而不是用"+"来连接字符串。
要点2，生成的html包裹在一个统一的块级元素中（比如table,div等）提交，而不要分开提交（比如生成多个tr重复添加给一个table）。
*/
function CreateTable(arr){
var arrHTML = [];
for(var i=0,j=arr.length;i<j;i++){
arrHTML.push(arr[i].join("</td><td>"));
}
return "<table><tr><td>" + arrHTML.join("</td></tr><tr><td>") + "</td></tr></table>";
}//下面创建DOM节点来创建table:
function CreateTableByDom(arr){
var _table = document.createElement("table");
var _tbody = document.createElement("tbody");
var _tr,td;
for(var i=0,j = arr.length;i<j;i++){
_tr = document.createElement("tr");
for(var x=0,y = arr[i].length; x<y; x++){
_td = document.createElement("td");
_td.appendChild(document.createTextNode(arr[i][x]));
_tr.appendChild(_td);
}
_tbody.appendChild(_tr);
}
_table.appendChild(_tbody);
return _table;
}
function testCreateTable(){
var t1=(new Date()).getTime();
document.getElementById("container").innerHTML = CreateTable(arrD);
t2 = (new Date()).getTime();
alert(t2-t1);
}
function testCreateTableByDom(){
var t1=(new Date()).getTime();
document.getElementById("container").appendChild(CreateTableByDom(arrD));
t2 = (new Date()).getTime();
alert(t2-t1);
}
</script>
<style type="text/css">
table{
border:#000000 1px solid;
}
td{
border:#000000 1px solid;
}
</style>
</head><body>
<input type="button" value="生成table innerHTML方法" onclick="testCreateTable()"/>
<input type="button" value="生成table DOM插入方法" onclick="testCreateTableByDom()"/>
<div id="container"></div>
</body>
</html>我不知道还有没有更快的方法，期待大虾来给个最终解决方案。
<script>
var json = {
fields: ["id", "name", "sex", "age"],
datas: [
["1001", "张飞", "男", "21"],
["1002", "吕布", "男", "21"],
["1003", "赵云", "男", "21"],
["1004", "曹操", "男", "21"]
]
};
function createTable(json){
var i, j, head = json.fields, data = json.datas;
for (i = 0; i < head.length; i++) {
head[i] = '<td>' + head[i] + '</td>';
}
for (i = 0; i < data.length; i++) {
for (j = 0; j < data[i].length; j++) {
data[i][j] = '<td>' + data[i][j] + '</td>';
}
data[i] = data[i].join('');
}
head = '<tr>' + head.join('') + '</tr>';
data = '<tr>' + data.join('</tr><tr>') + '</tr>';
return '<table>' + head + data + '</table>';
}
window.onload = function(){
document.getElementById('demo').innerHTML = createTable(json);
}
</script>