使用 childNodes 和 rows,cells 動作表格列著色效能測試

使用 childNodes 和 rows,cells 動作表格列著色效能測試

使用 childNodes 動作表格列著色原始碼、使用 rows,cells 動作表格列著色原始碼

        日常使用中，我們可能需要使用 js 來對錶格的行和列進行著色，以達到需要的效果。
        通常我們通過 rows 和 cells 遍曆行列集合，然後給列加上不同的 className。在表格行列比較少時，速度還不錯，但是當行列達到一定數量後，速度就下來了。下面是測試的兩個用例。

        使用 rows&cells 給表格著色 JS 原始碼：

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

        使用 childNodes 遍曆給表格著色 JS 原始碼：

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