解析js原生方法创建表格效率测试_javascript技巧-js tutoriel-php.cn

解析js原生方法创建表格效率测试_javascript技巧

WBOY

Libérer： 2016-05-16 17:29:49

original

1006 Les gens l'ont consulté

我们先看一下三种算法以及在各种浏览器下的表现。
第一种：直接操作dom。

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

        New Web Project

<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>for(var i = 0; i < 1000; i++ ) {<BR>    var tr = document.createElement("tr");<BR>    for(var j = 0; j < 5; 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.028<BR>//ie6 0.65<BR>//ie7 0.40<BR>//ie8 0.40<BR>//ie9 0.35<BR>//firefox14 0.035<BR>//opera12 0.03<BR>//safari5.17 0.014<BR>document.body.appendChild(table);<BR>var m2 = microtime(true);<BR>alert(m2-m1);<BR></script>

第二种，借助借助createDocumentFragment。

复制代码代码如下:

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

        New Web Project

<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 fragment = document.createDocumentFragment();<BR>for(var i = 0; i < 1000; i++ ) {<BR>    var tr = document.createElement("tr");<BR>    for(var j = 0; j < 5; j++ ) {<BR>        var td = document.createElement("td");<BR>        td.appendChild(document.createTextNode("cell "+i+","+j));<BR>        tr.appendChild(td);<BR>    }<BR>    fragment.appendChild(tr);<BR>}<BR>tbody.appendChild(fragment);<BR>table.appendChild(tbody);<BR>//chrome 0.03<BR>//ie6 0.68<BR>//ie7 0.43<BR>//ie8 0.43<BR>//ie9 0.37<BR>//firefox14 0.03<BR>//opera12 0.04<BR>//safari5.17 0.023<BR>document.body.appendChild(table);<BR>var m2 = microtime(true);<BR>alert(m2-m1);<BR></script>

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

复制代码代码如下:

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

New Web Project

<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 < 1000; i++ ) {<BR>tbody.insertRow(i);<BR>for(var j = 0; j < 5; j++ ) {<BR>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下效率太低，不建议使用。

对第一种算法简单的优化了一下：

复制代码代码如下:

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

        New Web Project

<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内核提供的一些特殊方法慎用。