使用 childNodes 和 rows,cells 操作表格列着色性能测试

使用 childNodes 和 rows,cells 操作表格列着色性能测试

使用 childNodes 操作表格列着色源代码、使用 rows,cells 操作表格列着色源代码下载地址

日常使用中，我们可能需要使用 js 来对表格的行和列进行着色，以达到需要的效果。
通常我们通过 rows 和 cells 遍历行列集合，然后给列加上不同的 className。在表格行列比较少时，速度还不错，但是当行列达到一定数量后，速度就下来了。下面是测试的两个用例。

使用 rows&cells 给表格着色 JS 源代码：

<mce:script type="text/javascript"><!-- var d1 = new Date(); var $ = function(id){return document.getElementById(id);}; var tbd = $("tbl").tBodies[0]; var classArr = ["grayBg","whiteBg"]; var row=null,cells=null,clength=0; var rlength = tbd.rows.length; //var rlength = tbd.childNodes.length; for (var i=0; i<rlength; i++) { row = tbd.rows[i]; // row = tbd.childNodes[i]; cells = row.cells; // cells = row.childNodes; clength = cells.length; for (var j=1; j<clength-2; j++) { cells[j].className = classArr[j%2]; } cells[clength-3].className += " rightDbl"; cells[clength-2].className = classArr[0]; cells[clength-1].className = classArr[0]; } /*var i =0; var dyCT = function(){ if (i == rlength) {clearTimeout(50);return;} row = tbd.rows[i]; cells = row.cells; clength = cells.length; for (var j=1; j<clength-2; j++) { cells[j].className = classArr[j%2]; } cells[clength-3].className += " rightDbl"; cells[clength-2].className = classArr[0]; cells[clength-1].className = classArr[0]; i++; setTimeout(dyCT,50); } dyCT();*/ row=null,cells=null,clength=0; var d2 = new Date(); document.write((d2-d1)+"ms"); // --></mce:script>
使用 rows&cells 给表格着色效果图：

使用 childNodes 遍历给表格着色 JS 源代码：

<mce:script type="text/javascript"><!-- var d1 = new Date(); var $ = function(id){return document.getElementById(id);}; var tbd = $("tbl").tBodies[0]; var classArr = ["grayBg","whiteBg"]; var row=null,cells=null,clength=0; //var rlength = tbd.rows.length; var rlength = tbd.childNodes.length; for (var i=0; i<rlength; i++) { // row = tbd.rows[i]; row = tbd.childNodes[i]; // cells = row.cells; cells = row.childNodes; clength = cells.length; for (var j=1; j<clength-2; j++) { cells[j].className = classArr[j%2]; } cells[clength-3].className += " rightDbl"; cells[clength-2].className = classArr[0]; cells[clength-1].className = classArr[0]; } /*var i =0; var dyCT = function(){ if (i == rlength) {clearTimeout(50);return;} row = tbd.rows[i]; cells = row.cells; clength = cells.length; for (var j=1; j<clength-2; j++) { cells[j].className = classArr[j%2]; } cells[clength-3].className += " rightDbl"; cells[clength-2].className = classArr[0]; cells[clength-1].className = classArr[0]; i++; setTimeout(dyCT,50); } dyCT();*/ row=null,cells=null,clength=0; var d2 = new Date(); document.write((d2-d1)+"ms"); // --></mce:script>

使用 childNodes 遍历给表格着色效果图：

着色界面效果一样，但是效率不一样。读者可以点击左上方的下载链接中将两种着色方法源代码下载下来，自己测试一下。从测试例可以看出,使用 rows&cells 遍历，速度为 1500ms 左右（我的电脑），而使用 childNodes 遍历，速度则为 250ms 左右。速度提升了 6 倍!。
使用 childNodes 遍历时，在 firefox 中应注意空白的问题，即 tr 与 tr 之间、td 与 td 之间的空白，在 firefox 中也是 childNode，所以用例中的“使用 childNodes 遍历给表格着色”代码在firefox中会出错。需要清除 tr、td 元素之间的空白元素才能正确显示。
以上测试, 均为 IE6 中所出。
原文链接：http://www.xw81.com/Html/Article/javascript/childNodes-rows-cells1.html。