JS ネイティブ メソッドを解析してテーブルを効率的に作成する test_javascript スキル

まず、3 つのアルゴリズムとさまざまなブラウザーでのパフォーマンスを見てみましょう。
最初のタイプ: dom を直接操作します。

コードをコピー コードは次のとおりです:

"http://www.w3.org/TR/html4/loose.dtd">



> var now = new Date().getTime() / 1000;
var s = parseInt(now, 10);
return (get_as_float) now : (Math.round) ((now - s) * 1000 ) / 1000) ' ' s;
}
var m1 = microtime(true);
var table = document.createElement("table");
table .border = 1;
var tbody = document.createElement("tbody");
for(var i = 0; i var tr = document.createElement("tr ");
for( var j = 0; j var td = document.createElement("td");
td.appendChild(document.createTextNode("cell " i "," j));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
/ /chrome 0.028
// document .body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1);

< ;/body>
< /html>




2 番目の方法は、createDocumentFragment を使用することです。






コードをコピー

コードは次のとおりです:
"http://www.w3.org/TR/html4/loose.dtd">

> var now = new Date().getTime() / 1000; var s = parseInt(now, 10); return (get_as_float) now : (Math.round) ((now - s) * 1000 ) / 1000) ' ' s;}var m1 = microtime(true);

var table = document.createElement("table");

table .border = 1;
var tbody = document.createElement("tbody");
var flagment = document.createDocumentFragment();
for(var i = 0; i var tr = document.createElement("tr");
for(var j = 0; j var td = document.createElement("td");
td.appendChild(document.createTextNode ("cell " i "," j));
tr.appendChild(td);
}
flagment.appendChild(tr);
}
tbody.appendChild(fragment);
table.appendChild(tbody);
//chrome 0.03
//ie6 0.68
//ie7 0.43
//ie8 0.43
/ /ie9 0.37
// firefox14 0.03
//opera12 0.04
//safari5.17 0.023
document.body.appendChild(table);
var m2 = microtime(true);
alert(m2-m1) ;





第三种：借助js的原生表格操作方法

复制代銭代码如下:

"http://www.w3.org/TR /html4/loose.dtd">





<script><br>microtime = function(get_as_float) {<br>var now = new Date().getTime() / 1000;<br>var s = parseInt(now, 10);<br>return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) ' ' s;<br>}<br>var m1 = microtime(true);<br>var table = document.createElement("table" );<br>table.border = 1;<br>var tbody = document.createElement("tbody");<br>table.appendChild(tbody);<br>for(var i = 0; i tbody.insertRow(i);<br>for(var j = 0; j tbody.rows[i].insertCell(j);<br> tbody.rows[i].cells[j].appendChild(document.createTextNode("cell " i "," j));<br>}<br>var tr = document.createElement("tr");<br>tbody.appendChild(tr);<br>}<br>//chrome 0.19<br>//ie9 0.18<br>//ie8 0.25<br>//ie7 8.50<br>//ie6 20.45<br> //firefox14 0.065<br>//opera12 0.25<br>//safari5.17 0.18<br>document.body.appendChild(table);<br>var m2 = microtime(true);<br>alert(m2- m1);<br></script>   

以上可用出用原生的js创建表格效率最好，介助createDocumentFragment优势不是很大（并不像网上）

は、insertRow や insertCell などを介して ie6、7 で使用することを推奨していません。

复制代 代码如下:

"http://www.w3.org/TR/html4/loose.dtd">


🎜>


<script><br>microtime = function(get_as_float) {<br> var now = new Date().getTime() / 1000;<br> var s = parseInt(now, 10);<br> return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) ' ' s;<br>}<br>var m1 = microtime(true);<br>var table = document.createElement("table" );<br>table.border = 1;<br>var tbody = document.createElement("tbody");<br>var i = 1000;<br>while(i--){<br> var tr = document.createElement("tr"), j = 5;<br> while(j--){<br> var td = document.createElement("td");<br> td.appendChild(document.createTextNode(" cell " i "," j));<br> tr.appendChild(td);<br> }<br> tbody.appendChild(tr);<br>}<br>table.appendChild(tbody);<br>//chrome 0.03<br>//ie6 0.66<br>//ie7 0.41<br>//ie8 0.41<br>//ie9 0.35<br>//firefox14 0.03<br>//opera12 0.03<br> //safari5.17 0.013<br>document.body.appendChild(table);<br>var m2 = microtime(true);<br>alert(m2-m1);<br></script>   

总结：对dom操作全力でcreateElementとappendChildを使用、jsで内部核が提供するいくつかの特別な方法を慎重に使用してください。