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

【问题标题】：how to add large amounts of HTML to IE without crippling the CPU如何在不破坏 CPU 的情况下向 IE 添加大量 HTML
【发布时间】：2011-11-26 07:28:32
【问题描述】：

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

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

您将从我的代码块中看到，我也尝试使用非 jquery 方法。两条线在 ie 中的表现都非常糟糕。所以我的问题是，向页面添加大量 html 以使其不会压碎的最佳做法是什么？

【问题讨论】：

什么是responseHtml？你只打过一次这个电话吗？如果它像您的示例看起来一样简单，那么您无能为力。
老兄！快他永远不会:(
@BNL responseHtml 是来自服务器的纯标记。调用是按需加载的。在一种情况下，我使用它来过滤动态表（当前通过回发重新加载）。
不确定这是否有帮助，但应该使代码看起来更干净：$('#targetElementId').load(url)
@Rodolfo .load 会做同样的事情。另外，我无法缓存，所以我猜测 url 需要一些随机生成的值。 jquery's cache: false 为我很好地处理了这个:)

标签： jquery html ajax internet-explorer dom

【解决方案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!" }

【讨论】：

哈哈，这只是增加了一个额外的步骤
不完全。返回 JSON 可以节省数据传输，同时缓存 HTML 生成，因此性能仅在第一次使用模板时受到影响，这意味着 IE 中的响应更快。
@d_r_w 我在项目的其他地方使用这种方法，我在这里不使用它的原因是由于大小。返回 JSON 仅限于。
您在一个 AJAX 请求中返回了这么多数据？这可能就是它在 IE 中运行如此缓慢的原因。
@d_r_w 即处理请求大小就好了。如果我删除所有 dom 处理，它与其他浏览器一样快。

【解决方案2】：

您可以尝试使用 .text() 或 .html()。

【讨论】：

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