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

日常使用中,我们可能需要使用js来对表格的行和列进行着色,以达到需要的效果。

通常我们通过rows和cells遍历行列集合,然后给列加上不同的className。在表格行列比较少时,速度还不错,但是当行列达到一定数量后,速度就下来了。下面是测试的两个用例。

使用rows&cells给表格着色

使用childNodes遍历给表格着色

从测试例可以看出,使用rows&cells遍历,速度为1500ms左右(我的电脑),而使用childNodes遍历,速度则为250ms左右。速度提升了6倍!。

使用childNodes遍历时,在firefox中应注意空白的问题,即tr与tr之间、td与td之间的空白,在firefox中也是childNode,所以用例中的“使用childNodes遍历给表格着色”代码在firefox中会出错。需要清除tr、td元素之间的空白元素才能正确显示。

以上测试, 均为IE6中所出

XeonWell Studio