Browser Diet - Chaining

JavaScript performance comparison

Revision 2 of this test case created by Arthur M. Santos

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="myDiv">
</div>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Chaining
$("#myDiv").addClass("foo").css("border-color", "#ccc").width(200);
pending…
Separate calls
var $elem;
var $my_div = $("#myDiv");

for (var i = 0, offset = $my_div.length; i < offset; i++) {
  $elem = $($my_div[i]);
  $elem.addClass("foo");
  $elem.css("border-color", "#f0f");
  $elem.width(200);
}
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

Arthur M. Santos commented :

O encadeamento de execução de métodos em objetos jQuery implica em loops implícitos à execução (um objeto jQuery é um array composto pelo elementos selecionados e métodos que executam ações nesta coleção de elementos): http://www.elijahmanor.com/2013/01/yo-dawg-i-herd-you-like-loops-so-jquery.html?utmsource=javascriptweekly&amp;utmmedium=email&m=1.

O melhor é armazenar seleções em variáveis locais e acessar os elementos encontrados em um único loop.

Add a comment