how to add large amounts of HTML to IE without crippling the CPU

Question

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?

Answer 1

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:

{ text: "Blah!" }

Answer 2

You can try .text() or .html().