Resizing Children

JavaScript performance comparison

Test case created by Jonathan Sampson

Info

Testing whether jQuery and JavaScript have a large difference in performance on resizing children.

Preparation code

<div id="content">
    <p>Bresaola beef ribs andouille corned beef, t-bone pancetta shankle drumstick shoulder. Tail short ribs pork chop flank, <img src="http://www.igourmet.com/images/topics/bacon1.jpg" align="right" /> tongue pork loin salami beef ribs meatball. Cow beef ribs shoulder shankle strip steak. Pork tenderloin ribeye, beef spare ribs ground round shank meatloaf. Ground round brisket meatball andouille beef ribs, bacon meatloaf beef. Sirloin beef ribs fatback ball tip, biltong shankle ribeye ground round spare ribs rump pork loin ham hock. Strip steak tongue venison tenderloin, bresaola swine pork ham hock shoulder fatback tri-tip pancetta bacon.</p>
    <p>Pig turkey boudin fatback, corned beef ham hock drumstick. Shankle ground round bresaola pastrami beef ribs venison ribeye shank. Shankle short ribs ribeye, pastrami drumstick ball tip pork strip steak short loin jowl swine bresaola tongue turkey ground round. Salami short ribs beef, tongue pork loin ball tip cow chicken chuck hamburger ground round jerky meatball. Ham hamburger ham hock strip steak bresaola, spare ribs venison cow drumstick pork bacon tri-tip. Short ribs shankle t-bone swine ground round, drumstick sausage pancetta beef corned beef beef ribs cow. Pork belly biltong ham hock meatball.</p>
    <p>Ball tip ground round meatball, pancetta bacon swine corned beef fatback short loin strip steak jerky beef. Strip steak swine bacon, tail jerky pastrami shankle tongue flank venison ribeye chicken. Meatloaf pork belly brisket cow andouille jowl short loin flank. Meatball boudin bresaola cow. Pastrami chuck tenderloin chicken pig. Meatball short loin t-bone spare ribs shoulder drumstick. Hamburger corned beef strip steak, shank fatback salami bacon beef ground round.</p>
  </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

Bresaola beef ribs andouille corned beef, t-bone pancetta shankle drumstick shoulder. Tail short ribs pork chop flank, tongue pork loin salami beef ribs meatball. Cow beef ribs shoulder shankle strip steak. Pork tenderloin ribeye, beef spare ribs ground round shank meatloaf. Ground round brisket meatball andouille beef ribs, bacon meatloaf beef. Sirloin beef ribs fatback ball tip, biltong shankle ribeye ground round spare ribs rump pork loin ham hock. Strip steak tongue venison tenderloin, bresaola swine pork ham hock shoulder fatback tri-tip pancetta bacon.

Pig turkey boudin fatback, corned beef ham hock drumstick. Shankle ground round bresaola pastrami beef ribs venison ribeye shank. Shankle short ribs ribeye, pastrami drumstick ball tip pork strip steak short loin jowl swine bresaola tongue turkey ground round. Salami short ribs beef, tongue pork loin ball tip cow chicken chuck hamburger ground round jerky meatball. Ham hamburger ham hock strip steak bresaola, spare ribs venison cow drumstick pork bacon tri-tip. Short ribs shankle t-bone swine ground round, drumstick sausage pancetta beef corned beef beef ribs cow. Pork belly biltong ham hock meatball.

Ball tip ground round meatball, pancetta bacon swine corned beef fatback short loin strip steak jerky beef. Strip steak swine bacon, tail jerky pastrami shankle tongue flank venison ribeye chicken. Meatloaf pork belly brisket cow andouille jowl short loin flank. Meatball boudin bresaola cow. Pastrami chuck tenderloin chicken pig. Meatball short loin t-bone spare ribs shoulder drumstick. Hamburger corned beef strip steak, shank fatback salami bacon beef ground round.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery
$('*', '#content').width('100%');
pending…
JavaScript
var i, tags = document.getElementById("content").getElementsByTagName("*");
for ( i = 0; i < tags.length; i++ ) {
  tags[i].style.width = '100%';
}
pending…
Caching Length
var i, 
    tags = document.getElementById("content").getElementsByTagName("*"),
    total = tags.length;
for ( i = 0; i < total; i++ ) {
  tags[i].style.width = '100%';
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Jonathan Sampson (revision owner) commented :

Note the jump in performance that comes by caching the length variable as well.

Add a comment