如何在不損壞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

回答

相關問題