国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > JS优化

JS优化

来源:程序员人生   发布时间:2015-01-20 09:01:07 阅读次数:3339次

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之类的,估计就卡死了。

但新的方式,几秒钟就可以出来。

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生