解析js原生方法創建表格效率測試

對於創建表格本文提到的算法共有種分別是直接操作dom借助createDocumentFragment借助js的原生表格操作方法

　　我們先看一下三種算法以及在各種浏覽器下的表現
第一種直接操作dom

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN"
"
<html xmlns="
    <head>
        <meta httpequiv="ContentType" content="text/html; charset=utf" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date()getTime() / ;
            var s = parseInt(now );
            return (get_as_float) ? now : (Mathround((now s) * ) / ) + + s;
}
var m = microtime(true);
var table = documentcreateElement("table");
tableborder = ;
var tbody = documentcreateElement("tbody");
for(var i = ; i < ; i++ ) {
    var tr = documentcreateElement("tr");
    for(var j = ; j < ; j++ ) {
        var td = documentcreateElement("td");
        tdappendChild(documentcreateTextNode("cell "+i+""+j));
        trappendChild(td);
    }
    tbodyappendChild(tr);
}
tableappendChild(tbody);
//chrome
//ie
//ie
//ie
//ie
//firefox
//opera
//safari
documentbodyappendChild(table);
var m = microtime(true);
alert(mm);
</script>
    </body>
</html>

　　
第二種借助借助createDocumentFragment

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN"
"
<html xmlns="
    <head>
        <meta httpequiv="ContentType" content="text/html; charset=utf" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date()getTime() / ;
            var s = parseInt(now );
            return (get_as_float) ? now : (Mathround((now s) * ) / ) + + s;
}
var m = microtime(true);
var table = documentcreateElement("table");
tableborder = ;
var tbody = documentcreateElement("tbody");
var fragment = documentcreateDocumentFragment();
for(var i = ; i < ; i++ ) {
    var tr = documentcreateElement("tr");
    for(var j = ; j < ; j++ ) {
        var td = documentcreateElement("td");
        tdappendChild(documentcreateTextNode("cell "+i+""+j));
        trappendChild(td);
    }
    fragmentappendChild(tr);
}
tbodyappendChild(fragment);
tableappendChild(tbody);
//chrome
//ie
//ie
//ie
//ie
//firefox
//opera
//safari
documentbodyappendChild(table);
var m = microtime(true);
alert(mm);
</script>
    </body>
</html>

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

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN"
"
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>New Web Project</title>
</head>
<body>
<script>
microtime = function(get_as_float) {
var now = new Date()getTime() / ;
var s = parseInt(now );
return (get_as_float) ? now : (Mathround((now s) * ) / ) + + s;
}
var m = microtime(true);
var table = documentcreateElement("table");
tableborder = ;
var tbody = documentcreateElement("tbody");
tableappendChild(tbody);
for(var i = ; i < ; i++ ) {
tbodyinsertRow(i);
for(var j = ; j < ; j++ ) {
tbodyrows[i]insertCell(j);
tbodyrows[i]cells[j]appendChild(documentcreateTextNode("cell "+i+""+j));
}
var tr = documentcreateElement("tr");
tbodyappendChild(tr);
}
//chrome
//ie
//ie
//ie
//ie
//firefox
//opera
//safari
documentbodyappendChild(table);
var m = microtime(true);
alert(mm);
</script>
</body>
</html>

　　
以上可以看出用原生的js創建表格效率最好借助createDocumentFragment優勢不是很大（並不像網上說的那麼明顯）借助insertRow和insertCell等在ie下效率太低不建議使用

對第一種算法簡單的優化了一下

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN"
"
<html xmlns="
    <head>
        <meta httpequiv="ContentType" content="text/html; charset=utf" />
        <title>New Web Project</title>
    </head>
    <body>
<script>
microtime = function(get_as_float) {
            var now = new Date()getTime() / ;
            var s = parseInt(now );
            return (get_as_float) ? now : (Mathround((now s) * ) / ) + + s;
}
var m = microtime(true);
var table = documentcreateElement("table");
tableborder = ;
var tbody = documentcreateElement("tbody");
var i = ;
while(i){
    var tr = documentcreateElement("tr") j = ;
    while(j){
        var td = documentcreateElement("td");
        tdappendChild(documentcreateTextNode("cell "+i+""+j));
        trappendChild(td);
    }
    tbodyappendChild(tr);
}
tableappendChild(tbody);
//chrome
//ie
//ie
//ie
//ie
//firefox
//opera
//safari
documentbodyappendChild(table);
var m = microtime(true);
alert(mm);
</script>
    </body>
</html>

　　
總結對dom操作盡量使用createElement和appendChild對於js內核提供的一些特殊方法慎用

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19826.html