Home/ Questions/Q 646807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T21:39:11+00:00

Has anyone ever tested, or does anyone know, the performance differences of these two

  • 0

Has anyone ever tested, or does anyone know, the performance differences of these two different ways of rendering the same html content (other than the fact that one has imported the jquery library and the other hasn’t, and that there are two requests in the Ajax version versus one)?

Add HTML via Ajax

<html>
<head>
    <script src="javascripts/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    jQuery.ajax({
        type: "GET",
        url: "http://www.mysite.com/events",
        success: function(result) {
            $("#container").append(result);
        }
    });
    </script>

    <body>
        <div id="container">
        </div>
    </body>
</html>

Inline HTML

<html>
<head>
    <body>
        <div id="container">
            <!-- events -->
            <ol>
                <li>
                    <p>
                        Event A...
                    </p>
                </li>
            </ol>
        </div>
    </body>
</html>

What are the statistics on this, when would you and wouldn’t you use something like this? How much slower is the Ajax version (say, if I were to render something as complex as the Amazon homepage, assuming I didn’t have to worry about paths, since this would be my own app)? This question is independent of best practices for readability and all that, just wondering about performance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The overall performance in your example isn’t dominated by the rendering performance of $("#container").append(result); vs inline HTML. It’s dominated by the number of HTTP requests.

    In the HTML-only example, only one single HTTP request is made, and the content can begin rendering as soon as the first few chunks are downloaded.

    In the JS example, the browser starts loading the HTML, and then it gets to the first script tag and it has to go download, parse, and execute jquery.js. Then it has to download /events. Only after both of those two HTTP requests have fully completed can it begin to render the HTML. So in practice your page will show much more slowly. See the performance rules about scripts at the bottom and minimizing http requests for more info.

    • 0