JS优化
来源:程序员人生 发布时间:2015-01-20 09:01:07 阅读次数:3359次
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之类的,估计就卡死了。
但新的方式,几秒钟就可以出来。
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠