← Back to jQuery Course | Chapter 2: Selectors | Lesson 10 of 10

Selectors का Performance

ID selectors unique elements के लिए आमतौर पर simple और तेज़ होते हैं।

In this page:

  1. IDs को Prefer करें
  2. Specific Selectors इस्तेमाल करें
  3. Repeated Selections को Cache करें
  4. Descendants के लिए find इस्तेमाल करें
  5. अनावश्यक Work से बचें
Syntax
javascript 
var $cached = $("#id");        // ID selector: fastest
$("#parentId tag.class");        // specific selector

var $items = $(".class");         // cache the result
$items.method();                  // reuse it, no new DOM search

IDs को Prefer करें

क्योंकि ids unique होती हैं, jQuery एक ID selector को सीधे browser के native getElementById को दे सकता है, इसे सबसे तेज़ available lookup बनाते हुए। इसके उलट, class और attribute selectors को हर match ढूँढने के लिए jQuery को internally ज़्यादा काम करना पड़ता है।

उदाहरण: Prefer IDs

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="main">Content</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("#main").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Specific Selectors इस्तेमाल करें

सिर्फ '.active' के बजाय '#list li.active' जैसा एक ज़्यादा specific selector browser को check करने के लिए कम candidate elements देता है, जो बड़े pages पर selection को noticeably तेज़ कर देता है।

उदाहरण: Use Specific Selectors

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"><li class="active">A</li><li>B</li></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("#list li.active").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Repeated Selections को Cache करें

किसी selector के result को एक variable में store करना -- var $rows = $('.row') -- का मतलब है jQuery सिर्फ एक बार DOM search करता है, हर बार जब आपको उन elements की फिर ज़रूरत हो तो उसी query को दोबारा चलाने के बजाय।

उदाहरण: Cache Repeated Selections

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div class="row">A</div><div class="row">B</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      var $rows = $(".row");
      $("#output").text($rows.length);
      $rows.css("color", "blue");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Descendants के लिए find इस्तेमाल करें

पहले से selected किसी parent पर .find() call करना search को सिर्फ उस parent के descendants तक सीमित करता है, जो पूरे document को एक broader selector से दोबारा query करने से तेज़ है। यह pattern पूरे document को दोबारा scan करने से बचता है जब आपको पहले से पता हो कि आपको चाहिए elements किस container के अंदर हैं।

उदाहरण: Use find for Descendants

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="parent"><p>Inside</p></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      var $parent = $("#parent");
      $("#output").text($parent.find("p").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

अनावश्यक Work से बचें

exactly वही select करना जो आपको चाहिए, और हर follow-up operation के लिए उस cached selection को reuse करना, redundant DOM traversal से बचाता है -- jQuery-heavy code में सबसे बड़ी performance जीत।

उदाहरण: Avoid Unneeded Work

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div class="box">A</div><div class="box">B</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      var $boxes = $(".box");
      $boxes.addClass("ready");
      $boxes.css("border", "1px solid black");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Form वाले Filter Selectors · Child वाले Filter Selectors · Visibility वाले Filter Selectors · Content वाले Filter Selectors

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. सिर्फ tag या class से select करना, जैसे $(".active"), जबकि $("#list li.active") जैसा एक narrower selector browser को scan करने के लिए कम elements देता है।
  2. एक loop के अंदर वही $(".row") query चलाना बजाय इसे एक बार var $rows = $(".row") जैसे variable में save करने के।
  3. पहले से $main रखे होने के बाद भी $("#main .item") से पूरा page फिर से search करना, जबकि $main.find(".item") सिर्फ इसके अंदर search करता है।
चैप्टर सारांश
  • Selectors elements को tag, class, ID, attribute, form type, और hierarchy में position से ढूँढते हैं।
  • Filter selectors matches को content, visibility, child position, या form state से narrow करते हैं।
  • Selector performance मायने रखती है, इसलिए selectors सावधानी से चुनें।
🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Form Filter Selectors Next Lesson → Introduction to jQuery Events

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.