ajax在IE中调用非常慢

我在我的网页中有以下Ajax代码。它基本上对数据库进行Ajax调用并返回一堆记录。此代码在Firefox中运行速度很快，但在IE中速度很慢。我只是想知道是否有任何方法来优化此代码的IE浏览器。ajax在IE中调用非常慢

代码

var fill_test_table = function(data){ 
     var tr; 
     for (var i=0; i < data.length; i++) { 
       tr=$('<tr/>'); 
       tr.append("<td>" + widget[i].name + "</td>"); 
       tr.append("<td>" + widget[i].age + "</td>"); 
       tr.append("<td>" + widget[i].status + "</td>"); 
       tr.append("<a href='widget.html?id=" + widget[i].id + "&age=" + widget[i].age + "&status=" + widget[i].status + "&name=" + widget[i].name.replace("'","%27") + "'</a><button>Edit</button>&nbsp;</td>");  
       $("#widget_table").append(tr); 
     } 
     $("#widget_table").append("</tbody>"); 
}; 


$(document).ready (function() { 
       $.ajax({ 
       url: "/cgi-bin/getwdigets", 
       dataType: "json",     
       success: function(data) { 
         fill_test_table(data); 
         } 
        }); 
     })

我发现下面的职位jQuery Ajax call very slow in IE, but instant in Firefox并试图执行一些提出的建议。但是如果有什么明显的问题需要解决，我想知道。

来源

2015-04-23 dot

您可以使用一个'.append（）'，它将添加整个HTML，而不是'.append（）'吨。这应该会加快速度。 – Regent

高度怀疑它是Ajax调用，它是你的循环很慢。不要追加每一行！建立一个字符串中的所有行/单元格并追加一次。 – epascarello

也''（“＃widget_table”）。append（“”）;'没有意义 – epascarello

我敢打赌，这不是请求本身很慢，而是你的循环添加了dom元素。此外，您错过了包含该链接的最后一个单元的开头<td>。这应该更快：

var markup = ''; 
for (var i=0; i < data.length; i++) { 
    markup += "<tr>" 
    + "<td>" + widget[i].name + "</td>" 
    + "<td>" + widget[i].age + "</td>" 
    + "<td>" + widget[i].status + "</td>" 
    + "<td><a href=\"widget.html?id=" + widget[i].id + "&age=" + widget[i].age + "&status=" + widget[i].status + "&name=" + widget[i].name.replace("'","%27") + "\"</a><button>Edit</button>&nbsp;</td>" 
    + "</tr>"; 
} 
$("#widget_table").append(markup);

来源

2015-04-23 13:39:21 Connum

ajax调用没有错。 for循环是它在IE中非常慢的原因。

尝试创建一个字符串，然后将其附加到DOM。

或

尝试创建文档片段，然后在DOM中追加片段。

来源

2015-04-23 13:33:39 karthick

试试这个

var fill_test_table = function(data){ 
    var innerHtml = ''; 
    for (var i=0; i < data.length; i++) { 
     innerHtml +='<tr><td>' + widget[i].name + '</td>' 
      +'<td>' + widget[i].age + '</td>' 
      +'<td>' + widget[i].status + '</td>' 
      +'<td><a href="widget.html?id=' + widget[i].id + '&age=' + widget[i].age + '&status=' + widget[i].status + '&name=' + widget[i].name.replace("'","%27") + '"</a><button>Edit</button>&nbsp;</td></tr>';  
    } 
    $("#widget_table").html('<tbody>'+innerHtml+'</tbody>'); 
};

来源

2015-04-23 13:37:13 Jag

我希望看到你的想法的更好的解释，而不是_try this_ – Regent

你可以通过看到......来区分这个区别。没有'$''tr''和'append（）'。它将'innerHtml'构建为普通的sting并作为'html'追加到表中。 – Jag

问题是渲染网页，而不是Ajax调用。所以你应该尝试这样的事情：

var restuls= []; 
for (var i= 0; i < data.length; i++) 
{ 
     restuls += "<td>" + widget[i].name + "</td>" + 
         "<td>" + widget[i].age + "</td>" + 
         "<td>" + widget[i].status + "</td>" + 
         "<a href='widget.html?id=" + widget[i].id + "&age=" + widget[i].age + "&status=" + widget[i].status + "&name=" + widget[i].name.replace("'","%27") + "'</a><button>Edit</button>&nbsp;</td>"      
} 

$('#widget_table').empty().append(restuls);

希望它的帮助。

来源

2015-04-23 13:39:05 gon250

@dot你也应该在我的答案中使用'append'，因为当你必须替换html代码时使用'html（）'，我认为你不想替换html。 – gon250

你为什么首先创建一个数组，然后连接它？它不应该有那么多的开销，但没有必要。 – Connum

@Connum你是对的！我已经更新了答案！谢谢。 – gon250

ajax在IE中调用非常慢

回答

相关问题