[jQuery] Performance Improvements
Hi,
I commented on the blog post regarding the performance comparison of
various frameworks and said I would test a bit.
So I did. Here are the results.
The test page is very simple. It starts like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function echo(m)
{
var msg = document.getElementById("msg");
msg.appendChild(document.createTextNode(m + "\n"));
}
$(document).ready(function() {
var start, end;
start = new Date();
var byname = document.getElementsByTagName("div");
end = new Date();
echo("Byname count: " + byname.length);
echo("Byname time: " + (end - start));
start = new Date();
var directsel = $("div");
end = new Date();
echo("Direct selector count: " + directsel.length);
echo("Direct selector time: " + (end - start));
start = new Date();
var doublesel = $("div div");
end = new Date();
echo("Double selector count: " + doublesel.length);
echo("Double selector time: " + (end - start));
start = new Date();
var murdersel = $("div, div div");
end = new Date();
echo("Murder selector count: " + murdersel.length);
echo("Murder selector time: " + (end - start));
});
</script>
</head>
<body>
<pre id="msg"></pre>
This is followed by 285 repetitions of this HTML snippet, which forms
the search base for the expressions above:
<div>
</div>
<div>
<div>
</div>
</div>
<div>
<div>
</div>
<div>
<div>
</div>
</div>
</div>
(A total of 1995 divs.)
I ran the tests on a Athlon64 3000+ (clocked at 2.2 GHz), single core, 1
GB RAM, running Gentoo Linux in 64-bit mode. I used three browsers:
Firefox 1.5.0.9
Opera 9.02
Konqueror 3.5.5
I tested each of them several times; the results varied within 5%.
OK, that's all very boring, really. Here's the important thing: I tested
both jQuery 1.1.1 and a version patched with the attached file. The
patched version uses the object identity issue I pointed out in the blog
comment to speed up the duplicate check of merge() and map().
Here are my results:
Firefox:
Without speed patch:
Byname count: 1995
Byname time: 1
Direct selector count: 1995
Direct selector time: 2535
Double selector count: 1140
Double selector time: 4019
Murder selector count: 1995
Murder selector time: 6588
With speed patch:
Byname count: 1995
Byname time: 1
Direct selector count: 1995
Direct selector time: 139
Double selector count: 1140
Double selector time: 2621
Murder selector count: 1995
Murder selector time: 2588
Opera:
Without speed patch:
Byname count: 1995
Byname time: 0
Direct selector count: 1995
Direct selector time: 2579
Double selector count: 1140
Double selector time: 2113
Murder selector count: 1995
Murder selector time: 4945
With speed patch:
Byname count: 1995
Byname time: 0
Direct selector count: 1995
Direct selector time: 45
Double selector count: 1140
Double selector time: 2108
Murder selector count: 1995
Murder selector time: 2105
Konqueror:
Without speed patch:
Byname count: 1995
Byname time: 0
Direct selector count: 1995
Direct selector time: 5043
Double selector count: 1140
Double selector time: 3699
Murder selector count: 1995
Murder selector time: 9540
With speed patch:
Byname count: 1995
Byname time: 0
Direct selector count: 1995
Direct selector time: 128
Double selector count: 1140
Double selector time: 8415
Murder selector count: 1995
Murder selector time: 8490
Only an extensive test suite can verify that everything still works
correctly after applying the patch, but the dramatic performance
improvements especially on the simple selected should make it worth the
while.
The strange slowdown of Konqueror on the second selector also needs
investigating.
Another issue is of course the rather unsophisticated timing method I
used. This was a quick hack, a work of a few hours, and I have no
previous experience with JS profiling.
Thank you for this interesting library.
Sebastian Redl
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/