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

Question

我一直在尝试更多ajax方法来加载页面上的数据,主要是为了避免回发.我可以通过ajax调用轻松获取服务器构造的html,并在jquery的.append或.replaceWith的帮助下将其添加到dom中非常简单.这两种方法在chrome/firefox中都非常快,但在(7,8,9)中非常慢.

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

你会从我的代码块中看到,我也试图使用非jquery方法.这两条线在ie中表现得非常糟糕.所以我的问题是,向页面添加大量html的最佳做法是什么,所以它不会粉碎ie？

Answer 1

如果可以的话，最好将 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!" }