如何在不损坏CPU的情况下向IE添加大量HTML

我一直在尝试更多的Ajax方法来在页面上加载数据，主要是为了避免回传。我可以通过ajax调用轻松获取服务器构造的html，并通过jQuery的.append或.replaceWith帮助将其添加到dom中。这两种方法在Chrome/Firefox中速度非常快，但ie（7,8,9）非常慢。如何在不损坏CPU的情况下向IE添加大量HTML

$.ajax(
{ 
    url: url, 
    dataType: 'html', 
    cache: false, 
    success: function (responseHtml) 
    { 
      //document.getElementById('targetElementId').outerHTML = responseHtml; 
      $('#targetElementId').replaceWith(responseHtml); 
    } 
});

你会看到我的代码块，我也试图使用非jQuery的方法。两条线都表现可怕。所以我的问题是什么是向页面添加大量html的最佳做法，所以它不会暗恋ie？

来源

2011-09-27 Drew

什么是responseHtml？你只是打一次电话吗？如果它像你的例子那样简单，那么你可以做的事情就不多。 – BNL

ie dude！快：他永远不会:( –

@BNL responseHtml是纯服务器的标记，这个调用按需加载，在一个实例中，我用它来过滤一个动态表（当前通过回传重新加载） – Drew

如果可以，最好将JSON返回给浏览器，并使用像jQuery tmpl这样的模板插件将json映射到HTML以显示，因为tmpl会执行一些美妙的缓存来加速较慢浏览器的性能IE浏览器。它也使得JSON响应更加快速。例如：

<script id="template" type="text/x-jquery-tmpl"> 
    <span class="message">${text}</span> 
</script> 


<script type="text/javascript"> 
    $.ajax(
    { 
     url: url, 
     dataType: 'json', 
     cache: false, 
     success: function (data) 
     { 
      $("#targetElementId").html($("#template").tmpl(data)); 
     } 
    }); 
</script>

你的JSON响应将需要格式化，使得它相匹配的模板：

{ text: "Blah!" }

来源

2011-09-27 18:49:43 doctorless

LOL只是增加了一个额外的步骤 –

不完全。返回JSON保存数据传输，在缓存的HTML代之上，所以性能只会在第一次使用模板时受到影响，这意味着IE中的响应速度很快。 – doctorless

@d_r_w我在项目中的其他地方使用这种方法，我不使用它的原因是由于大小。返回JSON仅限于。 – Drew

您可以尝试的.text（）或.html（）。

来源

2011-09-27 18:50:44 orolo

我见过在IE中提到DOM操作的测试要慢得多，也许replacewith正在使用这种方法。相反，尝试使用javascript .innerHTML = responseHTML可以提高速度（这可能与您建议的使用.text或.html相同） – Rodolfo

如何在不损坏CPU的情况下向IE添加大量HTML

回答

相关问题