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之类的,估计就卡死了。
但新的方式,几秒钟就能出来。
其他精彩文章
jQuery教程(19)-jquery ajax操作之序列化表单
jQuery教程(18)-ajax操作之执行POST请求
jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同...
jQuery教程(21)-jquery ajax 回调函数
更多关于android开发文章