JS优化

浏览数：48 / 时间：2015年06月09日

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 = '';

} insertFunction();},

对于大数据量，不同的处理方式，效率完全不同。原来在ie中是几分钟都出不来，如果有多个scrollLeft=0之类的，估计就卡死了。

但新的方式，几秒钟就能出来。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS优化