JS優化
來源:程序員人生 發布時間:2015-01-20 09:01:07 閱讀次數:3522次
JS效力在頁面節點或元素少的時候很難體現出來。但1旦元素多了,效力問題很容易就出來,特別是IE。
最近修改之前1個項目。可能初期設計時不存在幾千個INPUT輸入框的情況,所以部份代碼寫法上沒有很好的斟酌回流和重繪。
清空INPUT的value值,原來1個個更新。1旦到flush的元素操作動作。1下子就卡住不動了。
由于所有的INPUT都在table中,所以更改了1下方式。
1、先把table通過document獲得到
2、把table從document中remove
3、對table中的input操作,這時候候不能用getelementbyid了,得用table.getelementsbytagname了。
4、更新input中的value
5、把table節點重新添加到document中。
主要方法代碼
<span style="white-space:pre"> </span>removeToInsertLater:function (element) {
var parentNode = element.parentNode;//danielinbiti 目前這代碼往上比較常見。但對回來來講感覺比visible隱藏顯示好使。
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
}
},
updateAllAnchors:function (element) {
var insertFunction = this.removeToInsertLater(element);
var inputs = element.getElementsByTagName("input");
var iLength = inputs.length;
for(var i=0;i<iLength;i++){<pre name="code" class="javascript"><span style="white-space:pre"> </span>inputs[i].value = '';
} insertFunction();},
對大數據量,不同的處理方式,效力完全不同。原來在ie中是幾分鐘都出不來,如果有多個scrollLeft=0之類的,估計就卡死了。
但新的方式,幾秒鐘就可以出來。
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈