最近幾天要做一次產品的批量修改，前端展示一個產品列表,大概有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, 必須用前幾節講的方式來用，

其二也是最致命的，不止尺寸這一列，還有其它很多的產品屬性，所以不可能都換

?

?

?

?

?

轉載于:https://www.cnblogs.com/fuyun2000/archive/2012/04/06/2435484.html

總結

以上是生活随笔為你收集整理的计失败的一次js优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。