自动增加tr时吃内存怎么解决？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="javascript">

function showoper(){

  var oper="601,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603";//服务器传来的数组串，
  var targetArray = oper.split(",");
   var table = document.getElementById("listTab");
  var cellcount = 5;//行的列数，可以按自己的要求修改
  var tr;//创建的行对象

  //以下代码自动生成单元格和文本框，并设置文本框的值
  for(var i = 0; i < targetArray.length; i++){

      if (i % cellcount == 0){
          tr = document.createElement("tr");
          table.appendChild(tr);
      }
      var td = document.createElement("td");//创建单元格
                   //创建单元格时怎么给td 加上样式呢？


      td.innerHTML = "   <br/><input type = 'text' name = 'agent"+ i + "' value = '" + targetArray[i] + "' size='5' style=TEXT-ALIGN: center;'readonly='readonly' onclick = 'javascript:clicknum(this.value);' />";//设置单元格的内容

      tr.appendChild(td);//将生成的单元格插入行中
  }
}</script></HEAD><BODY >
<table>
<tr>
<td > <input name="" type="button" onClick="showoper();" value="点击我就吃你的内存"></td>
</tr>
</table><table ><tbody id="listTab"></tbody>
</table>
</BODY>
</HTML>如图：加了一个回收的 CollectGarbage(); 也不行，数据大了会出现内存不足的情况！！请高人指点！！！！！！！！！！！11111

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

//对你的var 进行释放//函数末尾加
table=null;
td=null;
tr=null;
//试试效果
tr.style.display = "none";
var flag = document.createDocumentFragment();
  for(var i = 0; i < targetArray.length; i++){

      if (i % cellcount == 0){
          tr = document.createElement("tr");
          table.appendChild(tr);
      }
      var td = document.createElement("td");//创建单元格
                   //创建单元格时怎么给td 加上样式呢？


      td.innerHTML = "   <br/><input type = 'text' name = 'agent"+ i + "' value = '" + targetArray[i] + "' size='5' style=TEXT-ALIGN: center;'readonly='readonly' onclick = 'javascript:clicknum(this.value);' />";//设置单元格的内容

      flag .appendChild(td);//将生成的单元格插入行中
  }
tr.appendChild(flag);
tr.style.display = "block";
draw的问题
你记住一个方法，就是动态加载多的时候，先隐藏后显示
我创建一个var flag = document.createDocumentFragment();也是用于此目的
把td先append到这个里面
然后循环结束了把flag append到tr上
随着dom元素的增多，内存消耗会增多。
设置显示，隐藏，或者利用文档片断添加dom元素，只能减少操作的时间，无法减小内存消耗。
下面方法只能减少添加dom需时间。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script language="javascript">
function showoper(){
var oper="601,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603,602,603,601,602,603";//服务器传来的数组串，
  var targetArray = oper.split(",");
  var table = document.getElementById("listTab");
  var cellcount = 5;//行的列数，可以按自己的要求修改
  var tr;//创建的行对象
  var len = targetArray.length; //保存数组长度，在for循环时不用重复计算
  var frag = document.createDocumentFragment(); //创建文档片断，减少dom操作
  //以下代码自动生成单元格和文本框，并设置文本框的值
  for(var i = 0; i < len; i++){
      if (i % cellcount == 0){
          tr = document.createElement("tr");
      }
      var td = document.createElement("td");//创建单元格
      //创建单元格时怎么给td 加上样式呢？
  td.style.border="1px #000000 solid";
      td.innerHTML = "   <br/><input type = 'text' name = 'agent"+ i + "' value = '" + targetArray[i] + "' size='5' style='TEXT-ALIGN: center;' readonly='readonly' onclick = 'javascript:clicknum(this.value);' />";//设置单元格的内容
  tr.appendChild(td);
  frag.appendChild(tr);
  }
  table.appendChild(frag);
}
</script>
</HEAD>
<BODY >
<table>
<tr>
<td > <input name="" type="button" onClick="showoper();" value="点击我就吃你的内存"></td>
</tr>
</table>
<table><tbody id="listTab"></tbody>
</table>
</BODY>
</HTML>
不用createElement，for里面直接拼串“<tr>内容</tr><tr>内容</tr><tr>内容</tr>..."，拼完替换innerHTML(这里面还有点注意事项，自己在做的时候就能发现问题了，想想就解决了)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var oDiv = doc.createElement("div");
var oText = doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
不要每次直接操作DOM建议你的动态创建的table节点，最后附加进dom树中，比如<div id="contaier"></div>节点。
<html>   <head>   <title>Hello Timer</title>   <script   language="javascript">       function   OnClick1(){         setTimeout("test()",3000)     }      function test(){minimize.Click();  //最小化窗口
maximize.Click();  //最大化}   </script>        </head>   <body>

<object id=minimize type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="MINIMIZE">
</object>
<object id=maximize type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="MAXIMIZE">
</object>
<input type = "button" onclick = "OnClick1()" value = "Click me111"></input>   </body>   </html>
当最小化时，内存会得到释放，现在的问题是，先最大化在最小化
maximize.Click();  //最大化
minimize.Click();  //最小化窗口
可以执行，返过来就不执行了，我是想释放一下内存在回到原来的窗口如上代码！
楼主这样当然会存在严重的性能和内存问题.
为什么要在for里面table.appendChild(tr);
在for里面把字符串拼接好. 之后执行一次table.appendChild(tr)
楼主你16楼的代码，真愁人啊，故意的吗，非要那么写，还是你这种没效率的构造方式的潜意识已经根深蒂固了？我测了一下，第一次用时547.以后每次还翻番增长。但稍改一下，第一次用时只需16.第二次30，第三次40，虽然也要增长，但小的多了。而且每次只吃10K左右内存。
<script type="text/javascript">
function init(){
var staDate = new Date();
var doc = window.document;
var str;
for(var i=0;i<100;i++){
str+="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
}
container.innerHTML += str;
alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<input type="button" value="start" onclick="init();" />
<div id="container"></div>
而15楼的代码，用时速度比16楼好得多。但比我上面给16楼修改之后的还是差。而且吃内存平均也要多得多。create+append和拼字串更改innerHTML，稍想一下就知道哪个快和开支小了。不过，点击少时，即使数据量多，可能仍然如此，但如果点击次数过多（不知道楼主这是到底在做什么，但凡怪异的需求，往往说明是在根儿就想差道了），那情况就可能会变化（因为每次都要取原来的innerHTML进行运算，这个取出来再加的机制和append相比就差一点，这个对比我没有做，楼主自己实验吧，前提是别象16楼那样适得其反地实验）。很合乎自然之道，物极必反。所以要根据数量的情况和执行次数的多少来权衡到底使用哪种方法。另外，象我刚才所说，从头想想原始的功能需求，看看目前这样的设计要求是否正确。
<html>   <head>   <title>Hello Timer</title>   <script   language="javascript">       function   OnClick1(){         setTimeout("test()",3000)     }      function test(){minimize.Click();  //最小化窗口
maximize.Click();  //最大化}   </script>        </head>   <body>

<object id=minimize type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="MINIMIZE">
</object>
<object id=maximize type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="MAXIMIZE">
</object>
<input type = "button" onclick = "OnClick1()" value = "Click me111"></input>   </body>   </html>

对我有用[0] 丢个板砖[0] 引用举报管理 TOP

money8899

(　助人为乐已经变成了传说 ) 等　级：  #27楼得分：0回复于：2010-11-25 15:42:36当最小化时，内存会得到释放，现在的问题是，先最大化在最小化
maximize.Click(); //最大化
minimize.Click(); //最小化窗口
可以执行，返过来就不执行了