js运行太慢

Question

 输入添加的行数：<input name="spsl" type="text" id="spsl" value="1" size="5" maxlength="10"  onkeydown='setTab();'> function setidqt()
{
  var strqt;
  strqt="";
  if(!window.form1.spsl.value)
   window.form1.spslqt.value=1;
   strqt+="<table width='100%'><tr align='center' bgcolor='ffdc94'> <td width='8%' height=20>产品编号</td><td width='14%'>产品名称 </td><td width='7%'>颜 色 </td> <td width='7%'>数 量(PCS)</td><td width='7%'>单价</td></tr></table>"
    for(var y=1;y<=window.form1.spslqt.value;y++){
     strqt+="<table width=100% border=0 cellpadding=2 cellspacing=0>";
         strqt+="<tr>"; 
         strqt+="<td width=9%>"; 
         strqt+="<div align=center>"; 
         strqt+="<input name='S_prono"+y+"' type='text' size=10 maxlength=20 value="+y+">";
          strqt+="</div></td>";
          strqt+="<td width=16%>"; 
          strqt+="<div align='center'> ";
          strqt+="<input name='S_proname"+y+"' type='text' size='30' maxlength='200'>";
          strqt+="</div>";
           strqt+="</td>";
strqt+="<td width='9%'>";
            strqt+="<div align='center'> ";
            strqt+="<input name='S_color"+y+"' type='text'  size=20 maxlength=100>";
            strqt+="</div></td>";
strqt+="<td width='7%'>";
            strqt+="<div align='center'> ";
            strqt+="<input name='S_proquantity"+y+"' type='text'  size=6 maxlength=15  onKeyUp='javascript:CheckNum(this);' value='0'>";
            strqt+="</div></td>";
             strqt+="<td  width=7%>"; 
            strqt+="<div align=center> ";
            strqt+="<input name='S_price"+y+"' type=text size='6' maxlength='15' onKeyUp='javascript:CheckNum(this);' value='0'>";
            strqt+="<select name='S_priceunit"+y+"' ><option value='$'>美元</option><option value='￥'>元</option><option value='€'>欧元</option></select></div>";
            strqt+="</td></tr></table>";
 }
  window.upidqt.innerHTML=strqt+"<br>";
}
以上代码是js添加行，如果超过100行，下拉框显示太慢了，半天点出不来，怎么改进？

Answer 1

本帖最后由 net_lover 于 2011-05-31 10:40:21 编辑

  

Answer 2

+=换成
var arr = new Array();
arr.pust(...)

Answer 3

s = []
s.push("<table width=100% border=0 cellpadding=2 cellspacing=0>")
s.push("<tr>")...................window.upidqt.innerHTML=s.join();

Answer 4

LZ的代码性能问题主要体现在2个方面：1、使用了过多的+=，+=要经过6步，例：
str = 'a';
str+= 'b'
1)创建存储a的字符串
2)创建存储b的字符串
3)创建存储连接结果的字符串
4)str的内容复制到结果中
5)b复制到结果中
6)更新str，使他指向结果
看下你的代码 每次都要经过这么6步，能不耗资源吗？所以循环次数较多的情况下，少用+=
2、for (var y = 1; y <= window.form1.spslqt.value; y++)
循环中对象属性的寻找层次过多 这样的话每循环一次 都要这么找一遍 你说能不慢吗？ 修改建议：
1）使用数组的push方法代替+=操作
strqt = [];   
strqt.push("<table width=100% border=0 cellpadding=2 cellspacing=0>");
...
strqt.join();
2）for循环中提取出判断条件
  for (var y = 1,val = window.form1.spslqt.value; y <= val; y++)
这样性能会提升很大一部分

Answer 5

function setidqt()
{
  var strqt;
  strqt=[];
  if(!window.form1.spsl.value)
   window.form1.spslqt.value=1;
   strqt.push("<table width='100%'><tr align='center' bgcolor='ffdc94'> <td width='8%' height=20>产品编号</td><td width='14%'>产品名称 </td><td width='7%'>颜 色 </td> <td width='7%'>数 量(PCS)</td><td width='7%'>单价</td> </tr></table>")
    for(var y=1;y<=window.form1.spslqt.value;y++){
     strqt.push("<table width=100% border=0 cellpadding=2 cellspacing=0>");
         strqt.push("<tr>"); 
         strqt.push("<td width=9%>"); 
         strqt.push("<div align=center>"); 
         strqt.push("<input name='S_prono"+y+"' type='text' size=10 maxlength=20 value="+y+">");
          strqt.push("</div></td>");
          strqt.push("<td width=16%>"); 
          strqt.push("<div align='center'> ");
          strqt.push("<input name='S_proname"+y+"' type='text' size='30' maxlength='200'>");
          strqt.push("</div>");
           strqt.push("</td>");
           
strqt.push("<td width='9%'>");
            strqt.push("<div align='center'> ");
            strqt.push("<input name='S_color"+y+"' type='text'  size=20 maxlength=100>");
            strqt.push("</div></td>");
strqt.push("<td width='7%'>");
            strqt.push("<div align='center'> ");
            strqt.push("<input name='S_proquantity"+y+"' type='text'  size=6 maxlength=15  onKeyUp='javascript:CheckNum(this);' value='0'>");
            strqt.push("</div></td>");
             strqt.push("<td  width=7%>"); 
            strqt.push("<div align=center> ");
            strqt.push("<input name='S_price"+y+"' type=text size='6' maxlength='15' onKeyUp='javascript:CheckNum(this);' value='0'>");
            strqt.push("<select name='S_priceunit"+y+"' ><option value='$'>美元</option><option value='￥'>元</option><option value='€'>欧元</option></select>");
            strqt.push("</div></td>");

            strqt.push("</tr></table><br>");
 }
  window.upidqt.innerHTML=strqt.join();
为什么生成了好多逗号呢？

Answer 6

把最后一句改成strqt.join("");就OK了 
join（）不带参数默认是用逗号链接的 所以会有很多逗号

Answer 7

1、你的for循环那块按照我的建议改了么？
2、直接换成数组直接量 
strqt.push("<table width=100% border=0 cellpadding=2 cellspacing=0>");
  strqt.push("<tr>");改成
strqt = ["<table width=100% border=0 cellpadding=2 cellspacing=0>","<tr>"]
没有必要无谓的去整那么多push，能合到一块的都写成直接量

Answer 8

strqt.push("<select name='S_priceunit"+y+"' >")
<%rs.open sql,conn,1,1
do while not rs.eof 
%>
strqt.push("<option value='<%=rs("moneytype")%>'><%=rs("moneyname")%></option>")
<%rs.movenext
loop%>
strqt.push("</select>");这一段是需要这么写的，那怎么合到一块去呢

Answer 9

function setidqt()
{
var strqt = [];
if (!window.form1.spsl.value)
{
window.form1.spslqt.value = 1;
}
strqt = ["<table width='100%'><tr align='center' bgcolor='ffdc94'> <td width='8%' height=20>产品编号</td><td width='14%'>产品名称 </td><td width='7%'>颜 色 </td> <td width='7%'>数 量(PCS)</td><td width='7%'>单价</td></tr></table>"]; for (var y = 1,val = window.form1.spslqt.value; y <= val; y++)
{
strqt.push(
"<table width=100% border=0 cellpadding=2 cellspacing=0>",
"<tr>",
"<td width=9%><div align=center>",
"<input name='S_prono" + y + "' type='text' size=10 maxlength=20 value=" + y + ">",
"</div></td>",
"<td width=16%>",
"<div align='center'> ",
"<input name='S_proname" + y + "' type='text' size='30' maxlength='200'>",
"</div></td>",
"<td width='9%'>",
"<div align='center'> ",
"<input name='S_color" + y + "' type='text' size=20 maxlength=100>",
"</div></td>",
"<td width='7%'>",
"<div align='center'> ",
"<input name='S_proquantity" + y + "' type='text' size=6 maxlength=15 onKeyUp='javascript:CheckNum(this);' value='0'>",
"</div></td>",
"<td width=7%>",
"<div align=center> ",
"<input name='S_price" + y + "' type=text size='6' maxlength='15' onKeyUp='javascript:CheckNum(this);' value='0'>",
"<select name='S_priceunit" + y + "' ><option value='$'>美元</option><option value='￥'>元</option><option value='€'>欧元</option></select></div>",
"</td></tr></table><br>"
);
}
window.upidqt.innerHTML = strqt.join("");
}该push的push 不该push的直接写成直接量 这已经是最简洁的了我觉的
另外：不知道LZ要循环多少次 如果超过500次 我觉的LZ的思路是不是考虑换换

Answer 10

那也不用套那么多层东西吧 你看你的结构啊 
每循环一次 都加table--->tr--->td--->div--->组件 最外层一个table 循环里面 tr-->td---> 组件 就完了

Answer 11

给你个简洁点儿的 和你之前的效果是一样的
function setidqt()
{
var strqt = [];
if (!window.form1.spsl.value)
    {
        window.form1.spslqt.value = 1;
    }

strqt = ["<table width='100%'><tr align='center' bgcolor='ffdc94'> <td width='8%' height=20>产品编号</td><td width='14%'>产品名称 </td><td width='7%'>颜 色 </td> <td width='7%'>数 量(PCS)</td><td width='7%'>单价</td>"];
for (var y = 1,val = window.form1.spslqt.value; y <= val; y++)
{
strqt.push(
"<tr>",
"<td width=8%>",
"<input name='S_prono" + y + "' type='text' size=10 maxlength=20 value=" + y + ">",
"</td>",
"<td width=14%>",
"<input name='S_proname" + y + "' type='text' size='30' maxlength='200'>",
"</td>",
"<td width='7%'>",
"<input name='S_color" + y + "' type='text' size=20 maxlength=100>",
"</td>",
"<td width='7%'>",
"<input name='S_proquantity" + y + "' type='text' size=6 maxlength=15 onKeyUp='javascript:CheckNum(this);' value='0'>",
"</td>",
"<td width=7%>",
"<input name='S_price" + y + "' type=text size='6' maxlength='15' onKeyUp='javascript:CheckNum(this);' value='0'>",
"<select name='S_priceunit" + y + "' ><option value='$'>美元</option><option value='￥'>元</option><option value='€'>欧元</option></select>",
"</td></tr><br>"
);
}
strqt.push("</table>")
window.upidqt.innerHTML = strqt.join("");
}