Fazer seleções repetivas vs. reaproveitar

JavaScript performance comparison

Test case created by Luís Soares

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class='bloco'>
  <ul id='lista1'>
    <li>aaaaaaaaaaaaaaaa</li>
    <li>bbbbbbbbbbbbbbbb</li>
    <li>cccccccccccccccc</li>
    <li>dddddddddddddddd</li>
    <li>eeeeeeeeeeeeeeee</li>
    <li>ffffffffffffffff</li>
  </ul>
</div>

Preparation code output

  • aaaaaaaaaaaaaaaa
  • bbbbbbbbbbbbbbbb
  • cccccccccccccccc
  • dddddddddddddddd
  • eeeeeeeeeeeeeeee
  • ffffffffffffffff

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Fazer a mesma seleção várias vezes
 
$('li').text('proposta2');
$('li').css('cursor', 'pointer');
$('li').css('color', 'green');
$('li').data('dado1' , 'valor1');
$('li').data('dado2' , 'valor2');
$('li').click(function() {
  $(this).fadeOut();
});
$('li').text('proposta3');
 pending…
Fazer caching
 
var lis = $('li');
lis.text('proposta2');
lis.css('cursor', 'pointer');
lis.css('color', 'green');
lis.data('dado1' , 'valor1');
lis.data('dado2' , 'valor2');
lis.click(function() {
  $(this).fadeOut();
});
lis.text('proposta3');
 pending…
Fazer chaining
 
$('li')
 .text('proposta2')
 .css('cursor', 'pointer')
 .css('color', 'green')
 .data('dado1' , 'valor1')
 .data('dado2' , 'valor2')
 .click(function() {
     $(this).fadeOut();
   })
 .text('proposta3');
 pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment