1

I have a dynamically constructed table built from data returned from an AJAX call. At the end of the function that builds the table, I need to apply jQuery UI wrappers to some anchor elements in the table, identified by icons of "map-marker" and "th-list". Which of these two options is better optimized?

$("#tblResults tbody tr td").find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

or 

$("#tblResults tbody tr td a[data-icon='map-marker'], #tblResults tbody tr td a[data-icon='th-list']").button()

This particular example won't suffer from doing it the less efficient way, but I have other places in my code where I'm applying callback functions to significantly larger tables, and it might make a difference there.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Michelle
  • 57
  • 1
  • 7
  • 1
    You would need to test them to see which is more performant. Just looking at the two, I would say the first is more performant on the DOM since the second find() is operating on a reduced scope, but the second one may perform better as it's a single operation. But that's something you have to test yourself, and then come to a conclusion if any time difference is that important. – Taplar Mar 22 '19 at 16:53
  • 1
    And reference [Optimize Selectors](http://learn.jquery.com/performance/optimize-selectors/) for some jQuery documentation on the topic. – Taplar Mar 22 '19 at 16:54
  • Neither is the best from my experience here on large DOM especially this would be true. BUT, please also add the HTML so that we may better assist you here. – Mark Schultheiss Mar 23 '19 at 04:39

1 Answers1

1

For reference see here: https://stackoverflow.com/a/16423239/125981 Now that is not an exact duplicate of your question but will help explain your question as a supplement.

The second is not better because it will do all this (I describe) twice so no not that one. Now how to actually improve the first one...

Since you mentioned "multiple" let's first get a reference to your table, then cache that in a variable to avoid multiple DOM hits just to do that.

let myResultsThing = $('#tblResults');

Now we have the element referenced by the ID (which is the fastest selector)

Why? Let's talk about that. The Sizzle engine that is in use here uses a right to left selector so, what this $("#tblResults tbody tr td") says is 1. Find all td, 2. filter those td for those inside a tr, 3. Filter those for those inside a tbody 4. Filter those that fall within the element denoted by the id #tblResults

Now if you have 10 tables with 100 td each in 10 rows in three tbody each you can see this is quite a busy amount of work. So by isolating to the ID first, we would eliminate very quickly 90%+ of our effort here.

OK, we have our table reference way up there above. Using that we can find the tbody (or all the tbody to be more precise there may be multiple), thus eliminating any td in headers and footers.

let myTbodies = myResultsThing.find('tbody')
//get into the rest of it
.find('tr td').find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

Now here I might be inclined to actually test all that above against 

myResultsThing.find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

Depending on what exactly your DOM looks like, you might cache (as I did the table) clear down to the TD or A element selectors but I will leave that to you as an exercise since we have no markup to speculate against here.

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100