首页 > 代码库 > JS优化
JS优化
JS效率在页面节点或者元素少的时候很难体现出来。但一旦元素多了,效率问题很容易就出来,特别是IE。
最近修改以前一个项目。可能早期设计时不存在几千个INPUT输入框的情况,所以部分代码写法上没有很好的考虑回流和重绘。
清空INPUT的value值,原来一个个更新。一旦到flush的元素操作动作。一下子就卡住不动了。
因为所有的INPUT都在table中,所以更改了一下方式。
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 = http://www.mamicode.com/'';} insertFunction();},
对于大数据量,不同的处理方式,效率完全不同。原来在ie中是几分钟都出不来,如果有多个scrollLeft=0之类的,估计就卡死了。
但新的方式,几秒钟就能出来。
JS优化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。