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.