计失败的一次js优化

最近几天要做一次产品的批量修改，前端展示一个产品列表,大概有500条数据，然后通过修改产品某一属性进行批量修改，譬如长，宽，高

 

第一次效果最差

 

<table id="table1"><tr><td><input type="hidden" name="hidLen" value=""/><input type="hidden" name="hidWid" value=""/><input type="hidden" name="hidHei" value=""/></td></tr></table>
<script>
var tableObj = docuement.getElementById('table1');
var rows = tableObj.rows;
for(var i = 0, len = rows.length; i < len; i++){
   var row = rows[i];
   var cell = row.cells[0];
   var hLen = cell.getElementsByName('hidLen')[0];
   var hWid = cell.getElementsByName('hidWid')[0];
   var hHei = cell.getElementsByName('hidHei')[0];
  hLen.value = '10';
  hWid.value = '10';
  hHei.value = '10';
}
</script>

 第二次不用循环row 直接根据name来找，并赋值，但是走入一个误区，因为原生不支持超找某节点下的name元素，因此自己写了一个方法，以为会提高效率，结果失败，还不如直接通过document.getElementsByName ，不过FireFox下没差别，IE下才会使用原生的快一点

<table id="table1"><tr><td><input type="hidden" name="hidLen" value=""/><input type="hidden" name="hidWid" value=""/><input type="hidden" name="hidHei" value=""/></td></tr></table>
<script>
  //辅助方法，查询某节点下的Name元素
  function getNames(nName, nType, nPare){
    var arr = [];
    var eles = nPare.getElementsByTagName(nType);
    for(var i = 0, len = eles.length; i < len; i++){
        var ele = eles[i];
        if(ele.name == nName){
            arr.push(ele);
        }
    }
    return arr;
  }

var tableObj = docuement.getElementById('table1');

var hLens = getNames('hidLen', 'input', tableObj);
var hWids = getNames('hidWid', 'input', tableObj);
var hHeis = getNames('hidHei', 'input', tableObj);

for(var i = 0, len = hLens.length; i < len; i++){
  hLens[i].value = '10';
  hWids[i].value = '10';
  hHeis[i].value = '10';
} //2000行数据IE下差不多200ms

</script>

 第三次得了，不要辅助的getNames方法了，还是原生效率高啊，还以为通过查找某节点下的元素，可以避免多次查找不必要的元素，可是忘记了辅助写的方法，还要比较是否相等，效率更慢

<table id="table1"><tr><td><input type="hidden" name="hidLen" value=""/><input type="hidden" name="hidWid" value=""/><input type="hidden" name="hidHei" value=""/></td></tr></table>
<script>
var hLens = document.getELementsByName('hidLen');
var hWids = document.getELementsByName('hidWid');
var hHeis = document.getELementsByName('hidHei');

for(var i = 0, len = hLens.length; i < len; i++){
  hLens[i].value = '10';
  hWids[i].value = '10';
  hHeis[i].value = '10';
}
</script>

 

 //2000行数据IE下差不多100ms
 

 

 

 第四次，想想反正只要把更改后的长宽高传给后台就行了，干脆用一个隐藏域，然后以特殊符号隔开好了

<table id="table1"><tr><td><input type="hidden" name="hidSize" value=""/></td></tr></table>
<script>
var hSizes = document.getELementsByName('hidSize');
for(var i = 0, len = hSizes.length; i < len;i++){
   hSizes[i].value = '10'+'-'+'10'+'-'+10;//就是这边的连接字符串还是会慢，还有后台出来的时候还要拆分，不爽
}
</script>

 

 //2000行数据IE下差不多50ms
  

 

 

 ？为什么不整个用html拼接，然后用innerHTML,其一IE下 table不能直接使用innerHTML, 必须用前几节讲的方式来用，

其二也是最致命的，不止尺寸这一列，还有其它很多的产品属性，所以不可能都换