Selectors Performance
In this page:
var $cached = $("#id"); // ID selector: fastest
$("#parentId tag.class"); // specific selector
var $items = $(".class"); // cache the result
$items.method(); // reuse it, no new DOM searchIDs को Prefer करें
क्योंकि ids unique होती हैं, jQuery एक ID selector को सीधे browser के native getElementById को दे सकता है, इसे सबसे तेज़ available lookup बनाते हुए। इसके उलट, class और attribute selectors को हर match ढूँढने के लिए jQuery को internally ज़्यादा काम करना पड़ता है।
उदाहरण: Prefer IDs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="main">Content</div>
<script>
console.log($("#main").length);
</script>
</body>
</html>Specific Selectors इस्तेमाल करें
सिर्फ '.active' के बजाय '#list li.active' जैसा एक ज़्यादा specific selector browser को check करने के लिए कम candidate elements देता है, जो बड़े pages पर selection को noticeably तेज़ कर देता है।
उदाहरण: Use Specific Selectors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li class="active">A</li><li>B</li></ul>
<script>
console.log($("#list li.active").length);
</script>
</body>
</html>Repeated Selections को Cache करें
किसी selector के result को एक variable में store करना -- var $rows = $('.row') -- का मतलब है jQuery सिर्फ एक बार DOM search करता है, हर बार जब आपको उन elements की फिर ज़रूरत हो तो उसी query को दोबारा चलाने के बजाय।
उदाहरण: Cache Repeated Selections
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="row">A</div><div class="row">B</div>
<script>
var $rows = $(".row");
console.log($rows.length);
$rows.css("color", "blue");
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="parent"><p>Inside</p></div>
<script>
var $parent = $("#parent");
console.log($parent.find("p").length);
</script>
</body>
</html>अनावश्यक Work से बचें
exactly वही select करना जो आपको चाहिए, और हर follow-up operation के लिए उस cached selection को reuse करना, redundant DOM traversal से बचाता है -- jQuery-heavy code में सबसे बड़ी performance जीत।
उदाहरण: Avoid Unneeded Work
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">A</div><div class="box">B</div>
<script>
var $boxes = $(".box");
$boxes.addClass("ready");
$boxes.css("border", "1px solid black");
</script>
</body>
</html>- सिर्फ tag या class से select करना, जैसे
$(".active"), जबकि$("#list li.active")जैसा एक narrower selector browser को scan करने के लिए कम elements देता है। - एक loop के अंदर वही
$(".row")query चलाना बजाय इसे एक बारvar $rows = $(".row")जैसे variable में save करने के। - पहले से
$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: