JS优化

浏览数：40 / 时间：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中。

主要方法代码

[javascript]?view plaincopy?
<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?=?‘‘;??