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

发布于 2024-12-07 03:23:31 字数 559 浏览 1 评论 0原文

我一直在尝试使用更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 以免破坏 ie 的最佳做法是什么？

原文

i've been experimenting with a more ajax approach to loading data on a page, mostly to avoid postbacks. i can easily acquire server-constructed html via an ajax call and adding it to the dom is simple enough with the help of jquery's .append or .replaceWith. both of these methods are extremely fast in chrome/firefox but terribly slow in ie (7,8,9).

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

you will see from my code block, i've also attempted to use a non-jquery approach. both lines perform horrendously in ie. so my question, what is the best practice for adding large amounts of html to a page so it doesnt crush ie?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奶茶白久 2024-12-14 03:23:31

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

If you can, you're better off returning JSON to the browser, and using a template plugin like jQuery tmpl to map the json to the HTML to display, since tmpl does some wonderful caching that speeds performance in slower browsers like IE. It also makes the JSON response snappier. Example:

<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>

Your JSON response would need to be formatted such that it matched the template: