Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

Question

Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

I currently have 2 mirror sections within my DOM, one for delivery and another for pickup. Both of these sections contain identical content structures. Here's an example:

<div class="main-section">
  <div class="description-content">
    <p><span class="to-emphasize"></span></p>
  </div>
  <div class="field-content">
    <input type="text" name="address"></input>
  </div>
  <div class="table-content">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

The question I have is regarding the efficiency of jQuery targeting and retargeting in situations like this. Which strategy would be more efficient? Here are two options to consider:

Strategy A: Add delivery/pickup selector to parent and query on parent.

<div class="main-section" data-type="delivery">
  <div class="description-content">
    <p><span class="to-emphasize"></span></p>
  </div>
  <div class="field-content">
    <input type="text" name="address"></input>
  </div>
  <div class="table-content">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

// jQuery code example
$(".main-section[data-type='delivery'] input[name='address']").val("new value")
$(".main-section[data-type='delivery'] .to-emphasize").empty()
$(".main-section[data-type='delivery'] .to-emphasize").append("new value")
delivery_or_pickup = $(this).parents(".main-section").data("type")
$(".main-section[data-type='"+delivery_or_pickup+"']").hide()

Strategy B: Add delivery/pickup selector to all children that need querying.

<div class="main-section" data-type="delivery">
  <div class="description-content" data-type="delivery">
    <p><span class="to-emphasize" data-type="delivery"></span></p>
  </div>
  <div class="field-content" data-type="delivery">
    <input type="text" name="address" data-type="delivery"></input>
  </div>
  <div class="table-content" data-type="delivery">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

// jQuery code example
$("input[name='address'][data-type='delivery']").val("new value")
$(".to-emphasize[data-type='delivery']").empty()
$(".to-emphasize[data-type='delivery']").append("new value")
delivery_or_pickup = $(this).data("type")
$(".main-section[data-type='"+delivery_or_pickup+"']").hide()

javascript jquery html css

Answer 1

Answer №1

The ideal solution for this scenario will ultimately be determined by the overall context of your code, as there are valid arguments for both approaches. If your code involves a significant amount of targeted elements, then I would suggest opting for the second option where you assign selectors to specific elements for two key reasons:

1. Reduction in Typing - Assign concise IDs to inputs that require frequent querying, such as #name, to minimize the number of characters needed each time they are accessed.

2. Enhanced Processing Efficiency and Speed - By assigning unique IDs to each input and storing them in variables, you can reduce the frequency of DOM look-ups performed by jQuery, thereby improving processing efficiency.

var name = $('#name');

Adhering to this practice is particularly beneficial when dealing with repetitive lookup of the same DOM elements throughout the codebase. This approach not only optimizes performance but also enhances code readability. For instance, the following code:

$("input[name='address'][data-type='delivery']").val("new value");

can be simplified to:

address.val("new value");

Answer 2

The ideal solution for this scenario will ultimately be determined by the overall context of your code, as there are valid arguments for both approaches. If your code involves a significant amount of targeted elements, then I would suggest opting for the second option where you assign selectors to specific elements for two key reasons:

1. Reduction in Typing - Assign concise IDs to inputs that require frequent querying, such as #name, to minimize the number of characters needed each time they are accessed.

2. Enhanced Processing Efficiency and Speed - By assigning unique IDs to each input and storing them in variables, you can reduce the frequency of DOM look-ups performed by jQuery, thereby improving processing efficiency.

var name = $('#name');

Adhering to this practice is particularly beneficial when dealing with repetitive lookup of the same DOM elements throughout the codebase. This approach not only optimizes performance but also enhances code readability. For instance, the following code:

$("input[name='address'][data-type='delivery']").val("new value");

can be simplified to:

address.val("new value");

Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

Answer №1

Similar questions

"Sequelize will pause and wait for the loop to finish before executing the

Unable to directly assign a variable within the subscribe() function

Simple HTML and CSS exercise for beginners to grasp the concept

Combining multer, CSRF protection, and express-validator in a Node.js environment

Design featuring a fixed top row and a scrollable bottom row

Is it acceptable to use JavaScript files in the pages directory in NEXTJS13, or is it strongly advised to only use TypeScript files in the most recent version?

The res.sendFile() function quickly delivers a 204 no content response

Setting Up AdminLTE Using Bower

Is there a way for me to convert this JSON object back into a string?

Tips for increasing the width of a button within an HTML table heading

Tips for creating canvas drawings in GWT

Transform JSON query conditions into MongoDB/Mongoose commands

showcasing products from database with the help of Angular 12

Ways to extract a specific value from a geojson object using the key name

Tips for maintaining video height consistency while adjusting its attributes

Dynamic content is loaded on the page using AJAX before refreshing to retrieve new

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

What is the best way to include multiple views in a main HTML template in Angular?

Every time I attempt to launch my Discord bot, I encounter an error message stating "ReferenceError: client is not defined." This issue is preventing my bot from starting up successfully

Is it necessary to compile Jade templates only once?