最近幾天要做一次產(chǎn)品的批量修改，前端展示一個(gè)產(chǎn)品列表,大概有500條數(shù)據(jù)，然后通過(guò)修改產(chǎn)品某一屬性進(jìn)行批量修改，譬如長(zhǎng)，寬，高

?

第一次效果最差

?

<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>

?第二次不用循環(huán)row 直接根據(jù)name來(lái)找，并賦值，但是走入一個(gè)誤區(qū)，因?yàn)樵恢С殖夷彻?jié)點(diǎn)下的name元素，因此自己寫了一個(gè)方法，以為會(huì)提高效率，結(jié)果失敗，還不如直接通過(guò)document.getElementsByName ，不過(guò)FireFox下沒(méi)差別，IE下才會(huì)使用原生的快一點(diǎn)

<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>
??//輔助方法，查詢某節(jié)點(diǎn)下的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行數(shù)據(jù)IE下差不多200ms

</script>

?第三次得了，不要輔助的getNames方法了，還是原生效率高啊，還以為通過(guò)查找某節(jié)點(diǎn)下的元素，可以避免多次查找不必要的元素，可是忘記了輔助寫的方法，還要比較是否相等，效率更慢

<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行數(shù)據(jù)IE下差不多100ms
?

?

?第四次，想想反正只要把更改后的長(zhǎng)寬高傳給后臺(tái)就行了，干脆用一個(gè)隱藏域，然后以特殊符號(hào)隔開(kāi)好了

<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;//就是這邊的連接字符串還是會(huì)慢，還有后臺(tái)出來(lái)的時(shí)候還要拆分，不爽
}
</script>

?

//2000行數(shù)據(jù)IE下差不多50ms
?

?

?？為什么不整個(gè)用html拼接，然后用innerHTML,其一IE下 table不能直接使用innerHTML, 必須用前幾節(jié)講的方式來(lái)用，

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

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/fuyun2000/archive/2012/04/06/2435484.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。