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

money8899 2010-11-23 05:00:24 


<!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
...全文
405 41 打赏 收藏 转发到动态 举报
写回复
用AI写文章
41 条回复
切换为时间正序
请发表友善的回复…
发表回复
mumubangditu 2010-11-28
  • 打赏
  • 举报
 回复
学习了，原来还有这种问题，以前出来没注意过。
jxxqll 2010-11-27
  • 打赏
  • 举报
 回复
受教了
碧海情天-赵亮 2010-11-26
  • 打赏
  • 举报
 回复
楼主你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楼那样适得其反地实验）。很合乎自然之道，物极必反。

所以要根据数量的情况和执行次数的多少来权衡到底使用哪种方法。另外，象我刚才所说，从头想想原始的功能需求，看看目前这样的设计要求是否正确。

yuyue618 2010-11-26
  • 打赏
  • 举报
 回复
楼主这样当然会存在严重的性能和内存问题.
为什么要在for里面table.appendChild(tr);
在for里面把字符串拼接好. 之后执行一次table.appendChild(tr)
root_lee 2010-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 27 楼 money8899 的回复:]

当最小化时，内存会得到释放，

现在的问题是，先最大化在最小化
maximize.Click(); //最大化
minimize.Click(); //最小化窗口
可以执行，返过来就不执行了，我是想释放一下内存在回到原来的窗口如上代码！
[/Quote]
楼主已经进入误区了，最小化内存得到释放，一旦还原窗口就会发现内存又涨回去了。最小化时内存减少是因为窗口不用绘制显示元素，窗口还原时，显示元素都会重绘，内存就又涨起来了。
这就好比是一个箱子，往里面放的每一个物品都会占用箱子的一部分空间，放的物品越多，占用的空间就越多，只要物品还在，所占用的空间就不会减少。现在内存就好比那个箱子，浏览器窗口中的显示元素就好比是物品，随着显示元素的增多，占用的内存空间就越多，想要减少物品所占用的空间，唯一的方法就是将物品拿出来，也就是让显示元素消失或不显示。
基于以上原理，建议楼主将显示元素尽量分配到多个页面，将不需要同时显示的元素隐藏。
money8899 2010-11-26
  • 打赏
  • 举报
 回复
<html>

<head>

<title>Hello Timer</title>

<script language="javascript">

function OnClick1(){

setTimeout("test()",3000)

}

function test(){

minimize.Click(); //最小化窗口
maximize.Click(); //最大化

}

</script>

</head>

<body>
<!--引用最小化class控件-->
<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(); //最小化窗口
可以执行，返过来就不执行了

无·法 社区初级成员 T1 2010-11-25
  • 打赏
  • 举报
 回复
定时重启ie看看呢
money8899 2010-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 sysdzw 的回复:]
引用 18 楼 money8899 的回复:

楼上的你看你的内存了没在涨个不停呀！！！
用户看到的是直接的效果，才不管什么内存的
[/Quote]

数据量大的化，测试了一天，出现1G的内存不足
honghe1 2010-11-25
  • 打赏
  • 举报
 回复
不要每次直接操作DOM

建议你的动态创建的table节点，最后附加进dom树中，比如<div id="contaier"></div>节点。

无·法 社区初级成员 T1 2010-11-25
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 money8899 的回复:]

楼上的你看你的内存了没在涨个不停呀！！！
[/Quote]用户看到的是直接的效果，才不管什么内存的
money8899 2010-11-25
  • 打赏
  • 举报
 回复
楼上的你看你的内存了没在涨个不停呀！！！
money8899 2010-11-25
  • 打赏
  • 举报
 回复
当最小化时，内存会得到释放，

现在的问题是，先最大化在最小化
maximize.Click(); //最大化
minimize.Click(); //最小化窗口
可以执行，返过来就不执行了，我是想释放一下内存在回到原来的窗口如上代码！

money8899 2010-11-25
  • 打赏
  • 举报
 回复 


 <html>   



<head>   



<title>Hello Timer</title>   



<script   language="javascript">   



    function   OnClick1(){   



      setTimeout("test()",3000)    



 }      



function test(){



minimize.Click();  //最小化窗口

maximize.Click();  //最大化



}   



</script>       



 </head>   



<body>   

<!--引用最小化class控件-->

<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>
root_lee 2010-11-24
  • 打赏
  • 举报
 回复
下面方法只能减少添加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>
十一文 2010-11-24
  • 打赏
  • 举报
 回复

跟着(cj[兔子党监察科科长])
学习了点
root_lee 2010-11-24
  • 打赏
  • 举报
 回复
随着dom元素的增多，内存消耗会增多。
设置显示，隐藏，或者利用文档片断添加dom元素，只能减少操作的时间，无法减小内存消耗。
Mr-Jee 2010-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 money8899 的回复:]

最小化窗口内存就下来了，它是调用的什么方法？？？
[/Quote]draw的问题
你记住一个方法，就是动态加载多的时候，先隐藏后显示
我创建一个var flag = document.createDocumentFragment();也是用于此目的
把td先append到这个里面
然后循环结束了把flag append到tr上
money8899 2010-11-24
  • 打赏
  • 举报
 回复
最小化窗口内存就下来了，它是调用的什么方法？？？
money8899 2010-11-24
  • 打赏
  • 举报
 回复
TO:兔子党监察科科长
你能给我一个全的代码吗？我看不明白谢谢！！
无·法 社区初级成员 T1 2010-11-24
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 money8899 的回复:]

HTML code
<!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 ……
[/Quote]测试了下，这个速度很快，比楼上的快多了
加载更多回复（9）
Linux0.11内核初始化讲解与调试
结合bochs仿真调试工具边讲解边调试linux0.11版本内核初始化过程，通过该课程可以学习和理解关于linux内核在内存中的分布、分段及分页机制、逻辑地址线性地址及物理地址的区别，更系统的理解CPU实模式及保护模式等。课程会以下面几个部分逐次展开：80386 CPU资源 80386 内存寻址机制 Linux多任务相关的TR寄存器和TSS任务状态段数据结构 中断和异常 Linux引导初始化--代码搬移过程 Bootsect代码详解 Bootsect代码详解续 bootsect里的设备号问题  bootsect代码解析之system模块搬移 setup.s程序详解 head.s程序详解 具体视频内容会根据讲解需要进行微调，详细内容参见csdn blog链接：https://blog.csdn.net/yuanfen5200/article/category/8692077
TR4—TR6阶段测试项目管理
TR4—TR6阶段测试项目管理 标签： 测试项目管理软件测试单元测试文档产品 2010-11-14 23:25 6338人阅读 评论(0) 收藏 举报 版权声明：本文为博主原创文章，未经博主允许不得转载。 软件测试概念 　　使用人工或者自动手段来运行或测试某个系统的过程,其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别. 　　它是帮助识别开发
OOM问题预防和排查内存泄漏及解决方法
理解了这个算法我们就理解了为啥 MySQL 躺着也能中枪了，因为它的体积总是最大（一般来说它在系统上占用内存最多），所以如果 Out of Memeory (OOM) 的话总是不幸第一个被 kill 掉。 一、什么是OOM，为什么会OOM 二、OOM问题排查 三、OOM问题解决方法
8T磁盘阵列文件存储服务器 威联通,NAS私有云老司机折腾体验记 篇八：QNAP 威联通TR-004磁盘阵列外接盒使用教程...
NAS私有云老司机折腾体验记 篇八：QNAP 威联通TR-004磁盘阵列外接盒使用教程2019-03-19 11:38:2425点赞232收藏28评论之前，为了追求极佳的笔记本使用体验，笔者将笔记本自带的2T机械硬盘换成了一块容量为240GB的固态硬盘，读写效能确实快了不少，可随着笔记本安装的应用程序与存放的资料越来越多，笔记本能够提供的存储空间越来越少，为了解决这个问题，笔者决定入手一款磁盘阵列...
[论文阅读]TR3D——迈向实时室内3D目标检测
TR3D论文阅读
JavaScript

87,915

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章