JQuery এর বংশধর উপাদান নির্বাচন করার জন্য দ্রুততম পদ্ধতি কোনটি?

Question

আমি যতদূর জানি, jQuery এ শিশু উপাদান নির্বাচন করার বিভিন্ন উপায় রয়েছে ।

//Store parent in a variable  
var $parent = $("#parent");

পদ্ধতি 1 (একটি সুযোগ ব্যবহার করে)

$(".child", $parent).show();

পদ্ধতি 2 (সন্ধান () পদ্ধতি

$parent.find(".child").show();

পদ্ধতি 3 (কেবলমাত্র তাত্ক্ষণিক শিশুদের জন্য)

$parent.children(".child").show();

পদ্ধতি 4 (সিএসএস নির্বাচকের মাধ্যমে) - @ স্পিনন দ্বারা প্রস্তাবিত

$("#parent > .child").show();

পদ্ধতি 5 ( পদ্ধতি 2 এর অনুরূপ ) - @ কাই অনুসারে

$("#parent .child").show();

আমি নিজে থেকে এটি তদন্ত করতে সক্ষম হওয়ার জন্য আমি প্রোফাইলিংয়ের সাথে পরিচিত নই, তাই আপনাকে কী বলতে হবে তা দেখতে আমি পছন্দ করব।

পিএস আমি বুঝতে পারি এটি এটি এই প্রশ্নের একটি সম্ভাব্য সদৃশ তবে এটি সমস্ত পদ্ধতিকে কভার করে না।

Comments

এছাড়াও, @ স্পিনন - এটি কেবল তাত্ক্ষণিক শিশুদের জন্য? সিএসএস স্পেক বলছে "কোনও এফ উপাদানের সাথে মেলে যা কোনও উপাদান ই এর একটি শিশু" "

— মার্কো

এর মধ্যে কোনটি দ্রুত (আপনার যদি সত্যিকার অর্থে বড় ডম ম্যানিপুলেশন না করা হয়) আপনার

— চিন্তার

আমার কাছে একটি 2 এমবি এইচটিএমএল ফাইল রয়েছে, কীভাবে বা কেন জিজ্ঞাসা করবেন না :)

— মার্কো

হ্যাঁ. শুধুমাত্র প্রথম স্তরের বংশধর।

— স্পিনন

আরও একটি উপায় আছে। $ ("# পিতা বা মাতা। ছেল্ড")। শো (); যা # 2 এর মতোই। :)

— কাই

Answer 1

পদ্ধতি 1 এবং পদ্ধতি 2 শুধু পার্থক্য সঙ্গে অভিন্ন যে পদ্ধতি 1 চাহিদা সুযোগ পাস পার্স এবং একটি কল করার জন্য এটি অনুবাদ করতে $parent.find(".child").show();।

পদ্ধতি 4 এবং পদ্ধতি 5 উভয়েরই নির্বাচককে বিশ্লেষণ করতে হবে এবং তারপরে কেবল কল করুন: $('#parent').children().filter('.child')এবং $('#parent').filter('.child')যথাক্রমে।

সুতরাং পদ্ধতি 3 সর্বদা দ্রুত হবে কারণ এটি সর্বনিম্ন কাজ করা প্রয়োজন এবং প্রথম স্তরের বাচ্চাদের পেতে সবচেয়ে সরাসরি পদ্ধতি ব্যবহার করে।

অনুরাগের সংশোধিত গতির পরীক্ষার ভিত্তিতে এখানে: http://jsfiddle.net/QLV9y/1/

গতি পরীক্ষা: (আরও ভাল)

উপর ক্রোম , পদ্ধতি 3 সেরা তারপর পদ্ধতি 1/2 এবং তারপর 4/5 হয়

উপর ফায়ারফক্স , পদ্ধতি 3 এখনও সেরা তারপর পদ্ধতি 1/2 এবং তারপর 4/5 হয়

উপর অপেরা , পদ্ধতি 3 এখনও সেরা তারপর পদ্ধতি 4/5 এবং তারপর 1/2

উপর আই ই 8 , যখন ধীর সামগ্রিক অন্যান্য ব্রাউজার চেয়ে, এটা এখনও পদ্ধতি 3, 1,2,4,5 ক্রম অনুসরণ করে।

সামগ্রিকভাবে, পদ্ধতি 3 হ'ল এটির ওভারল সর্বোত্তম পদ্ধতিটি এটি সরাসরি বলা হয় এবং এটি পদ্ধতির 1/2 এর বিপরীতে একাধিক স্তরের শিশু উপাদানকে অতিক্রম করার প্রয়োজন হয় না এবং এটি পদ্ধতি 4/5 এর মতো পার্স করার প্রয়োজন হয় না method

তবে, মনে রাখবেন যে এর মধ্যে কয়েকটিতে আমরা আপেলকে কমলার সাথে তুলনা করছি কারণ পদ্ধতি 5 টি প্রথম স্তরেরের পরিবর্তে সমস্ত বাচ্চাদের দিকে নজর দেয়।

Comments

অভিন্ন হিসাবে আপনি বোঝাতে চেয়েছেন যে তারা উভয় একই যুক্তি অনুসন্ধান করতে ব্যবহার করেন?

— মার্কো

আপনি কি মানে না যে 1 এবং 2 পদ্ধতিটি অভিন্ন?

— গুফা

ধন্যবাদ @ অ্যারন - আমি দেখতে চাই অন্যরা কী ভাবছেন, প্রত্যেকে রাজি হলে আমি আপনার উত্তরটি গ্রহণ করব। চিয়ার্স :)

— মার্কো

@ জেপি, আমার অর্থ হ'ল $parent.find(".child");কমান্ডে অনুবাদ করার জন্য এটি একটি সুযোগ পাস হচ্ছে তা স্বীকৃতি জানাতে অতিরিক্ত অতিরিক্ত সময় নেওয়া দরকার ।

— হারুন হারুন

@ অ্যারন @ মারকো - পরীক্ষাগুলি কিছুটা স্কিউড হতে পারে কারণ আমরা সবসময় প্রাসঙ্গিক হিসাবে রুট নোডটি ব্যবহার করি এবং ডকুমেন্টটি বেশ বড়। তা সত্ত্বেও, আমি বেশিরভাগ রান করে একে অপরের প্রতি 20 টি অপস / সেকেন্ডের মধ্যে 1 এবং 2 লাইন দেখছি। 1 এবং 2 এর সাথে তুলনা করে 4 টি প্রায় 100-200 অপ্স ধীর হয় এবং 5 টি প্রায় 400 অপ্স ধীর হয় যা বোধগম্য কারণ এটি কেবল বাচ্চাদের নয় সমস্ত বংশধরদের মধ্য দিয়ে যায়। চার্ট - tinyurl.com/25p4dhq

— অনুরাগ

Answer 2

পদ্ধতি 1

JQuery ব্যবহার করে খাটো এবং দ্রুত হতে পারে না। এই কলটি সরাসরি নেমে আসে $(context).find(selector)( পদ্ধতি 2 , অনুকূলকরণের কারণে) যা পরিবর্তে কল করে getElementById।

পদ্ধতি 2

একই কাজ করছে, তবে কিছু অপ্রয়োজনীয় অভ্যন্তরীণ ফাংশন কল ছাড়াই।

পদ্ধতি 3

ব্যবহার children()করা ব্যবহারের চেয়ে দ্রুত find(), তবে অবশ্যই children()কেবলমাত্র মূল উপাদানটির সরাসরি বাচ্চাগুলি খুঁজে পাবেন যেখানে find()সমস্ত শিশু এলেমেনের (বারবারের উপ-শিশু উপাদান সহ) পুনরাবৃত্তভাবে শীর্ষ-ডাউন অনুসন্ধান করা হবে using

পদ্ধতি 4

এর মতো নির্বাচকদের ব্যবহার করা ধীর হতে হবে। যেহেতু sizzle(যা jQuery থেকে নির্বাচক ইঞ্জিন) ডান থেকে বামে কাজ করে , এটি .childআইডি 'প্যারেন্ট' থেকে সরাসরি শিশু কিনা তা দেখে এটি আগে সমস্ত শ্রেণীর সাথে মিলবে ।

পদ্ধতি 5

যেমনটি আপনি সঠিকভাবে বলেছেন, $(context).find(selector)ফাংশনটির মধ্যে কিছু অনুকূলকরণের কারণে এই কলটি একটি কল তৈরি করবে jQuery, অন্যথায় এটি (ধীর) মাধ্যমেও যেতে পারে sizzle engine।

Comments

আপনি ভ্যার $ প্যারেন্ট = $ ("# পিতামাতা") এর কথা বলছেন না? আমি দেখতে পাচ্ছি না যে উপাদানটির ক্লাস থাকা অবস্থায় কীভাবে 1 পদ্ধতি getElementById ব্যবহার করতে পারে?

— মার্কো

আমি সম্মত হতে চেয়েছিলাম কিন্তু পদ্ধতি 1 এ, ডকস বলেছেন, Internally, selector context is implemented with the .find() method- দয়া করে আপডেট করুন, আমি জানি আপনি ওপি এর লেবেলে বিভ্রান্ত হয়ে

— পড়েছেন

@ রিগেল: সত্য তা ঠিক করে দিয়েছে। @ মারকো: পার্সিং #parentএকটি আইডি উপস্থাপন করে, যদি এটি একটি শ্রেণি হয় তবে এটি getElementByIdস্পষ্টতই ব্যবহার করবে না ।

— জানুয়ারি

Answer 3

যেহেতু এটি একটি পুরানো পোস্ট এবং সময়ের সাথে জিনিসগুলি পরিবর্তিত হয়। আমি এ পর্যন্ত সর্বশেষ ব্রাউজার সংস্করণে কিছু পরীক্ষা করেছি এবং ভুল বোঝাবুঝি এড়াতে এখানে পোস্ট করছি।

এইচটিএমএল 5 এবং সিএসএস 3 সামঞ্জস্যপূর্ণ ব্রাউজারগুলিতে jQuery 2.1 ব্যবহার করে পারফরম্যান্সের পরিবর্তন হয়।

এখানে পরীক্ষার দৃশ্য ও ফলাফল:

function doTest(selectorCallback) {
    var iterations = 100000;

    // Record the starting time, in UTC milliseconds.
    var start = new Date().getTime();

    for (var i = 0; i < iterations; i++) {
        // Execute the selector. The result does not need to be used or assigned
        selectorCallback();
    }

    // Determine how many milliseconds elapsed and return
    return new Date().getTime() - start;
}

function start() {
    jQuery('#stats').html('Testing...');
    var results = '';

    results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms";
    results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms";
    results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms";
    results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms";
    $parent = jQuery('#parent');
    results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms";

    jQuery('#stats').html(results);
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" />
    <title>HTML5 test</title>
    <script src="//code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<div id="stats"></div>
<button onclick="start()">Test</button>

<div>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

</body>
</html>

সুতরাং, 100 000 পুনরাবৃত্তির জন্য আমি পাই:

(আমি সেগুলি ফর্ম্যাটিংয়ের উদ্দেশ্যে img হিসাবে যুক্ত করেছি))

আপনি পরীক্ষা করতে কোড স্নিপেট নিজেই চালাতে পারেন;)

Comments

উহু! তারপরে দেখতে .find()দুর্দান্ত কাজ করে। এটি ব্যবহার অবিরত। :)

— অ্যান্ড্রু সুরডু