JQuery এ দ্রুততম বাচ্চাদের () বা সন্ধান () কী?


320

JQuery এ চাইল্ড নোড বাছাই করতে কেউ বাচ্চাদের ব্যবহার করতে পারেন () তবে এটিও খুঁজে পান ()।

উদাহরণ স্বরূপ:

$(this).children('.foo');

হিসাবে একই ফলাফল দেয়:

$(this).find('.foo');

এখন, কোন বিকল্পটি দ্রুত বা পছন্দসই এবং কেন?


27
.find()এবং .children()এক নয়। পরবর্তীকালে শিশু নির্বাচকের মতো কেবল ডিওএম গাছের নীচে একক স্তর ভ্রমণ করে।
টিমোথি 300

1
@ টিমোথি003 আপনি এটিকে ভুল বর্ণনা করেছেন, পূর্ববর্তীটি একক স্তরে ভ্রমণ করে না
দীপেশ রানা

5
@ দিপেশরানা প্রশ্নটি নয়, তীমথিয় 300 এর নিজস্ব বাক্যে প্রয়োগ করেছেন 'উত্তরোত্তর'।
জয়েশ ভূত

1
এই সমস্যাটি সামনে আনার জন্য ধন্যবাদ। অনেক ক্ষেত্রে পারফরম্যান্সের পার্থক্য তুচ্ছ, কিন্তু ডকস আসলে এই দুটি পদ্ধতি আলাদাভাবে প্রয়োগ করা হয়েছে তা উল্লেখ করে না! সেরা অনুশীলনের খাতিরে, এটি find()প্রায় সর্বদা দ্রুত তা জেনে রাখা ভাল ।
স্টিভ বেনার

এজন্য আমি ইংরেজিতে "প্রাক্তন" বা "পরে" নির্মাণটি পছন্দ করি না। আপনি যা বলতে চান তা কেবল বলুন। Sheesh।
ক্রিস ওয়াকার

উত্তর:


415

children()কেবল নোডের তাত্ক্ষণিক শিশুদের দিকে find()নজর রাখে , যখন নোডের নীচে পুরো ডিওএমকে ঘুরিয়ে দেয়, তাই সমতুল্য প্রয়োগগুলি দ্রুততর করা children() উচিত । যাইহোক, find()ব্যবহার নেটিভ ব্রাউজার পদ্ধতি, যখন children()ব্যবহারসমূহ জাভাস্ক্রিপ্ট ব্রাউজারে বুঝিয়ে দিলেন। আমার পরীক্ষাগুলিতে সাধারণ ক্ষেত্রে খুব বেশি পারফরম্যান্সের পার্থক্য নেই।

কোনটি ব্যবহার করবেন তা নির্ভর করে আপনি কেবল ডিওএম-এর নীচে থাকা তাত্ক্ষণিক বংশধর বা সমস্ত নোডকে বিবেচনা করতে চান কিনা তার উপর নির্ভর করে, যথা, পদ্ধতির গতি নয়, আপনার ফলাফলের ভিত্তিতে উপযুক্ত পদ্ধতিটি বেছে নিন। যদি পারফরম্যান্সটি সত্যই একটি সমস্যা হয় তবে সর্বোত্তম সমাধানটি খুঁজে বের করতে পরীক্ষা করুন এবং এটি ব্যবহার করুন (বা এখানে অন্যান্য উত্তরের কিছু মানদণ্ড দেখুন)।


9
অবশ্যই, তবে যদি পিতামাত্ত উপাদানটিতে কেবল শিশু নোড থাকে তবে কী হবে? আমি এই সম্পর্কে কিছু প্রোফাইলিং করতে যাচ্ছি।
জেসন

11
ডিএমও-সাবট্রিটি আপনার অনুসন্ধান কতটা জটিল তা ব্রাউজারের উপর নির্ভর করে বাচ্চাদের বনাম সন্ধানের পারফরম্যান্স নির্ভর করে। আধুনিক ব্রাউজারগুলিতে () অভ্যন্তরীণভাবে ক্যোয়ারীস্লেকটর সবগুলি ব্যবহার করে যা জটিল বাছাইকারী এবং ছোট থেকে মাঝারি ডিওএম সাবট্রিগুলিতে বাচ্চাদের () সহজেই ছাপিয়ে যেতে পারে।
লেজারেড

আপনার পরীক্ষাগুলির কিছু পরিমাণগত ফলাফল সরবরাহ করতে সহায়তা করবে।
লুক

5 থেকে 20 এর মধ্যে শ্রেণিবদ্ধ নেস্টিংস সহ সমস্ত পরীক্ষায় আমার জন্য () সর্বদা শিশুদের () ছাড়িয়ে যায়। (গুগল ক্রোম 54 এ পরীক্ষিত) আমি বিপরীতটি আশা করেছি। সুতরাং এখন থেকে, আমি সহজ উপায় নিয়ে যাব এবং (...) আমার উপাদানগুলিকে বাচ্চাদের ()। শিশুদের () শিশুদের () ... র মাধ্যমে আবিষ্কার করার পরিবর্তে তাদের খুঁজে
পাব

179

এই jscreen পরীক্ষা পরামর্শ দেয় যে () দ্রুততর হয়। আমি আরও পুঙ্খানুপুঙ্খ পরীক্ষা তৈরি করেছি এবং এটি এখনও মনে হচ্ছে যেন () শিশুদের () ছাড়িয়ে যায়।

আপডেট: টভানফসনের মন্তব্য অনুসারে, আমি নেস্টিংয়ের 16 টি স্তরের সাথে আরও একটি পরীক্ষার কেস তৈরি করেছি । সমস্ত সম্ভাব্য ডিভগুলি সন্ধান করার সময় ফাইন্ড () কেবল ধীর হয় তবে ডিভসের প্রথম স্তরটি নির্বাচন করার সময় () এখনও বাচ্চাদের () ছাড়িয়ে যায়।

বাচ্চারা () বাসা বেঁধে দেওয়ার জন্য 100 টিরও বেশি স্তরের বাসা বেঁধে দেয় এবং প্রায় 4000+ ডিভিড থাকে তখন তারা খুঁজে বের করে () খুঁজে বের করতে শুরু করে। এটি একটি প্রাথমিক পরীক্ষার কেস, তবে আমি এখনও মনে করি যে (বেশিরভাগ ক্ষেত্রেই শিশুদের তুলনায়) () দ্রুত () is

আমি ক্রোম বিকাশকারী সরঞ্জামগুলিতে jQuery কোডটি দিয়েছিলাম এবং লক্ষ্য করেছি যে বাচ্চারা () অভ্যন্তরীণভাবে ভাইবোনদের (), ফিল্টার () এ কল করে এবং (() এর চেয়ে আরও কয়েকটা রেগেক্সের মধ্য দিয়ে যায়।

() এবং বাচ্চাদের () বিভিন্ন চাহিদা পূরণ করে তবে যে ক্ষেত্রে সন্ধান () এবং শিশু () একই ফলাফল দেয়, আমি সন্ধান () ব্যবহার করার পরামর্শ দেব।


4
দেখে মনে হচ্ছে বাচ্চারা ডোম ট্র্যাভারসাল পদ্ধতি ব্যবহার করে এবং নির্বাচক এপিআই ব্যবহার করে যা দ্রুত।
topek

4
আপনার কাছে নেস্টিংয়ের মাত্র এক স্তর থাকার কারণে সুন্দর ডিজিটেনেট টেস্ট কেস। আপনি যদি সাধারণ কেসটি চান তবে আপনাকে কিছু নির্বিচারে বাসা বাঁধার গভীরতা স্থাপন করতে হবে এবং ফলাফল () বাচ্চাদের চেয়ে গভীর গাছকে () ছড়িয়ে দেওয়া হিসাবে কর্মক্ষমতা পরীক্ষা করতে হবে।
tvanfosson

যদি আপনি যাচাই করে থাকেন যে কোনও নির্দিষ্ট একক সন্তানের উপাদান (উদাহরণস্বরূপ ইভেন্ট.টারাগেট) কোনও নির্দিষ্ট ডোম উপাদানটিতে রয়েছে (যেমন $ ('। নভবার')) তবে $ .সামগ্রী (এটি, ইভেন্ট.আরজেট) এখন পর্যন্ত দ্রুততম (8,433,609 / সেকেন্ড বনাম 140 কে দ্রুত জিকিউরি অনুসন্ধানের জন্য)। jsperf.com/child-is-in- প্যারেন্ট
ক্রিস স্যাটিঙ্গার

92

এখানে একটি লিঙ্ক রয়েছে যা আপনি চালাতে পারেন এমন পারফরম্যান্স পরীক্ষা রয়েছে। find()তুলনায় আসলে প্রায় 2 গুণ দ্রুত children()

OSX10.7.6 এ ক্রোম


c। কন্টেইনস (ডকুমেন্ট.সেটলেটমেন্টবাইআইডি ('তালিকা')), $ ('। পরীক্ষা') [0]) 8,433,609 / সেকেন্ড। আপনার যদি নির্দিষ্ট উপাদান থাকে এবং কেবল B এ এ থাকে তা জানতে চান তবে এটি সেরা। jsperf.com/child-is-in-parent
ক্রিস স্যাটিঙ্গার

ভাল পরীক্ষা। মনে রাখবেন যে আপনি var $test = $list.find('.test');$ তালিকাটি jQuery অবজেক্টের মতো এমন কিছু করলে এটি আরও দ্রুত হতে পারে । jsperf.com/jquery-selectors-context/101
Maciej Krawczyk

24

এগুলি অগত্যা একই ফল দেয় না: find()আপনাকে যে কোনও বংশধর নোড দেবে, তবে children()কেবলমাত্র মিলে যাওয়া তাত্ক্ষণিক শিশুরা আপনাকে পাবে ।

এক পর্যায়ে, find()এটি অনেক ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে পড়েছিল কারণ এটি কেবলমাত্র তাত্ক্ষণিক শিশুদের জন্য নয়, প্রতিটি বংশধর নোডের সন্ধান করতে হয়েছিল a তবে এটি আর সত্য নয়; find()নেটিভ ব্রাউজার পদ্ধতি ব্যবহারের কারণে অনেক দ্রুত।


1
অন্যান্য উত্তর অনুযায়ী না haha: পি। কেবল যখন আপনার খুব, খুব, খুব বড় একটি ডোম গাছ আছে ..
pgarciacamou

1
@ ক্যামো এই উত্তরটি চার বছরের পুরনো। find()তখন অনেক ধীর ছিল!
জন ফেমেনিলা

@ ক্যামো বলছেন যে পারফরম্যান্সের অংশটি "অন্যান্য উত্তর অনুসারে নয়"। এই উত্তরের প্রথম অনুচ্ছেদটি সঠিক।
ডন চ্যাডল

14

অন্যান্য উত্তর কেউ ব্যবহার করার ক্ষেত্রে মোকাবেলা .children()বা .find(">")করতে শুধুমাত্র একটি পিতা বা মাতা উপাদান তাত্ক্ষণিক শিশুদের জন্য অনুসন্ধান করুন। সুতরাং, আমি বাচ্চাদের পার্থক্য করার জন্য তিনটি ভিন্ন উপায় ব্যবহার করে এটি সন্ধানের জন্য একটি জেএসফিউর পরীক্ষা তৈরি করেছি ।

যেমনটি ঘটে, অতিরিক্ত ">" নির্বাচক ব্যবহার করার .find()পরেও এখনও তার চেয়ে অনেক বেশি দ্রুত .children(); আমার সিস্টেমে, 10x তাই।

সুতরাং, আমার দৃষ্টিকোণ থেকে, মোটেও ফিল্টারিং মেকানিজম ব্যবহার করার খুব বেশি কারণ বলে মনে .children()হয় না।


3
এই মন্তব্যের জন্য আপনাকে ধন্যবাদ! আমি ভাবছি যে jQuery কেবলমাত্র .find (">" + x) এর জন্য একটি বাচ্চাদের (x) বানানোর দিকে পরিবর্তন করা উচিত, যদিও অন্যান্য জটিলতাগুলি সম্ভবত আমি ভাবছি না।
মাইকেল স্কট কুথবার্ট

1
এটি সবচেয়ে উপযুক্ত তুলনা বলে মনে হচ্ছে। ধন্যবাদ!
গলিজার

3

উভয় find()এবং children()পদ্ধতি মিলে যাওয়া উপাদানগুলির শিশুকে ফিল্টার করার জন্য ব্যবহৃত হয়, পূর্ববর্তীটি কোনও স্তরকে নীচে ভ্রমণ না করে, পরবর্তীটি একক স্তরের নিচে ভ্রমণ করে।

সরলভাবে:

  1. find() - ম্যাচ করা উপাদানগুলির শিশু, নাতি-নাতি, নাতি-নাতি ... সমস্ত স্তর নীচে অনুসন্ধান করুন।
  2. children() - কেবলমাত্র ম্যাচযুক্ত উপাদানগুলির সন্তানের মাধ্যমে অনুসন্ধান করুন (একক স্তর নীচে)।
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.