Performance Comparison of HTML Added via Javascript vs. Normal HTML Markup
Has anyone ever tested, or does anyone know, the performance differ开发者_C百科ences 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.
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.
jQuery is slower than plain HTML at rendering. Just as any javascript DOM manipulation is slower then plain HTML files
But there is much more to this than just rendering performance. A large table in fancy HTML format may take much longer to download than a compact JSON data query and a little jQuery to format it
Just getting a plain HTML fragment via AJAX is never going to gain you anything in total download time. But often it appears quicker from a users perspective since the main page structure loads quicker and then the details are fleshed out
The jQuery libraries are cached so they only have an overhead once per session or less
In your examples the difference would not be noticable. However in an Amazon style homepage, using pure HTML version as a baseline, the Ajax version would be slower anywhere from barely noticeable to slower on an order of magnitude. There are many variables that would affect the speed of the Ajax version (connection speed, browser's JavaScript engine, complexity of HTML being manipulated, number of Ajax calls, how well written the JavaScript is as well as others).
There is a good tool called dynaTrace that could help you diagnose Ajax bottlenecks. Firebug is also helpful in analyzing performance issues.
fwiw, this may seem unrelated but I have read that client side XSLT transforms XML files into the DOM 3x faster or more than letting js insert it but no tests or statistics were supplied.
The ajax is slower by exactly the time it takes to load http://www.mysite.com/events, + 3ms or so to do the append + 1-???ms to do the browser reflow (depending on browser and page complexity).
I am in a similar situation and am using a similar way to load html. It mostly depends on how fast the page load itself is, but if the html you're loading via ajax is complex then browser reflow time may be significant.
加载中,请稍侯......
精彩评论