JQuery का उपयोग करके HTML तत्वों को बनाने का सबसे कुशल तरीका क्या है?

Question

हाल ही में मैं बहुत सारे मोडल विंडो पॉप-अप कर रहा हूं और क्या नहीं, जिसके लिए मैंने jQuery का उपयोग किया है। मैंने पृष्ठ पर नए तत्वों को बनाने के लिए जिस विधि का उपयोग किया था, वह इस प्रकार है:

$("<div></div>");

हालाँकि, मुझे लग रहा है कि यह ऐसा करने का सबसे अच्छा या सबसे कारगर तरीका नहीं है। प्रदर्शन परिप्रेक्ष्य से jQuery में तत्वों को बनाने का सबसे अच्छा तरीका क्या है?

इस उत्तर में नीचे दिए गए सुझावों के मानदंड हैं।

Comments

शैलियों को हटाने के साथ प्रयोग करें और देखें कि क्या चीजों को गति मिलती है। मुझे सीएसएस एप्लीकेशन मिलती है और मेरे लिए बड़े पन्नों पर सबसे धीमी चीजों को अपडेट करती है।

— CVertex

समयपूर्व अनुकूलन से सावधान रहें - यदि आप एक समय में सैकड़ों DOM तत्वों के लिए ऐसा नहीं कर रहे हैं, या बहुत पुराने ब्राउज़रों का उपयोग कर रहे हैं, तो आप शायद ब्राउज़र के प्रदर्शन में कोई अंतर नहीं देखेंगे।

— ब्लेज़मॉन्गर

@Blazemonger यह इतना अधिक नहीं था कि मुझे DOM तत्वों को बनाने के लिए एक अधिक कुशल विधि की आवश्यकता थी , लेकिन स्थिति यह थी कि मैंने मुझे यह समझा दिया कि विकल्प क्या हैं और वे कितने कुशल हो सकते हैं।

— Darko Z

jQuery एक लाइब्रेरी है - आप इस कारण से लगभग हमेशा ओवरहेड प्रदर्शन लागतों को भोगेंगे: यह एक दुभाषिया के माध्यम से किसी से बात करने जैसा है। जब तक आप कच्चे जावास्क्रिप्ट का उपयोग नहीं करना चाहते हैं, तब तक इसका फायदा उठाएं कि यह $ ('<div>') लिखने में कितना तेज है और प्रदर्शन हिट को स्वीकार करता है।

— डैनी बुल्स

jsben.ch/#/bgvCV <= इस बेंचमार्क पर आपके सवाल का जवाब देना चाहिए

— एस्केपनेटस्केप

Answer 1

मैं $(document.createElement('div')); बेंचमार्किंग दिखाता हूं कि यह तकनीक सबसे तेज है। मैं अनुमान लगाता हूं क्योंकि jQuery को इसे एक तत्व के रूप में पहचानना और तत्व को स्वयं बनाना नहीं है।

आपको वास्तव में विभिन्न जावास्क्रिप्ट इंजनों के साथ बेंचमार्क चलाना चाहिए और परिणामों के साथ अपने दर्शकों को तौलना चाहिए। वहां से निर्णय लें।

Comments

jQuery डोम पर इसे "जोड़ता" है? कहाँ पे? इससे मुझे कोई मतलब नहीं है - डिव कहां जाएगा?

— स्ट्रैजर

jquery में एक निर्मित div को जावास्क्रिप्ट की तरह जोड़ा जाना चाहिए। $ ('<div>') तब तक DOM से जुड़ा नहीं है जब तक आप इसे (कुछ) को जोड़ नहीं देते।

— ओवेन

@ डेविड - जाहिर है आप सही हैं। मैं ध्यान दूंगा कि मैंने लगभग 2 साल पहले टिप्पणी जोड़ा था जब मैं jQuery सीखना शुरू कर रहा था। आपको एक करने की आवश्यकता होगी appendTo, ... क्योंकि टिप्पणियां स्पष्ट रूप से गलत थीं, मैंने उन्हें हटा दिया है।

— tvanfosson

बेंचमार्किंग संदर्भ महान है, लेकिन यह दसियों हजारों तत्वों के निर्माण का परीक्षण भी कर रहा है। आप एक विशिष्ट स्थिति में कई तत्वों के साथ कब काम करेंगे? संभावना है, आपको एक तत्व बनाने की तुलना में चिंता करने के लिए बड़ी चीजें मिली हैं। document.createElement "Ran 39,682 बार 0.097 सेकंड में", जबकि $ ('<div>') "Ran 12,642 0.068 सेकंड में।" मैं कहूंगा कि अगर कोई चीज एक सेकंड से भी कम समय में हजारों बार चल सकती है, तो आप सुरक्षित हैं।

— डैनी बुल्स

इसके अलावा, $ (document.createElement ('div') का उपयोग करके); मैं कहूंगा कि यह कम कुशल है क्योंकि यह काफी कम मात्रा में लाभ के लिए लिखने में अधिक समय लेता है जो आपको ब्राउज़र में मिलेगा यदि आप केवल एक तत्व को यहां और वहां एक समय में बना रहे हैं। तकनीकी रूप से, jQuery लुक-अप लागत के कारण एक पुस्तकालय के रूप में कम कुशल है और ओवरहेड के लिए आप इसका उपयोग कर रहे हैं। यदि कोई $। उन कारणों में से एक है जो आप इसका उपयोग करते हैं!

— डैनी बुल्स

Answer 2

व्यक्तिगत रूप से मेरा सुझाव है (पठनीयता के लिए):

$('<div>');

अब तक के सुझावों पर कुछ नंबर (सफारी 3.2.1 / मैक ओएस एक्स):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Comments

Jquery डॉक्स से: 'एकल तत्व बनाते समय समापन टैग या XHTML प्रारूप का उपयोग करें। उदाहरण के लिए, एक स्लैश / टैग के बिना स्पैन बनाने के लिए $ ("<span />") या $ ("<span> </ span>") का उपयोग करें। '

— tvanfosson

@ फिर, वह व्यवहार एक बग है, एक विशेषता नहीं है। कचरा, कचरा बाहर - यह सिर्फ इतना होता है कि आपको जो कचरा मिलता है वह स्वीकार्य है। जब तक फ़ंक्शन के विनिर्देशन में परिवर्तन न हो जाए, तब तक jQuery संस्करणों के बीच इस पर भरोसा न करें।

— 5:29

जैसी कि उम्मीद थी, मैक ओएस एक्स क्रोम (क्रिएटीमेंट के लिए 100ms () बनाम 500ms पाठ पार्सिंग) और मैक ओएस एक्स फ़ायरफ़ॉक्स (350ms बनाम 1000ms) में समान संख्याओं को देखकर। टेस्ट लूप लिखने के लिए धन्यवाद।

— अन्निका बैकस्ट्रॉम

@tvanfosson यह स्पष्ट रूप से बदल गया है, वर्तमान डॉक्स में यह कहा गया है: "जब पैरामीटर में एक टैग होता है (वैकल्पिक समापन टैग या त्वरित-समापन के साथ) - $ (" <img /> ") या $ (" <img> ") ), $ ("<a> </a>") या $ ("<a>") - jQuery मूल जावास्क्रिप्ट createElement () फ़ंक्शन का उपयोग करके तत्व बनाता है। "

— मेट्रोन

@MarcStober कोई अपराध नहीं हुआ। यह अभी भी यहाँ है: http://api.jquery.com/jQuery/#jQuery2 । डॉक्स वैकल्पिक समापन टैग या त्वरित-समापन का

— मेटाट्रॉन

Answer 3

सवाल:

JQuery का उपयोग करके HTML तत्वों को बनाने का सबसे कुशल तरीका क्या है?

उत्तर:

चूंकि यह jQueryतब है, मुझे लगता है कि इस (स्वच्छ) दृष्टिकोण का उपयोग करना बेहतर है (आप उपयोग कर रहे हैं)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

डेमो।

इस तरह, आप विशिष्ट तत्व जैसे इवेंट हैंडलर का भी उपयोग कर सकते हैं

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

डेमो।

लेकिन जब आप बहुत सारे गतिशील तत्वों के साथ काम कर रहे होते हैं, तो आपको handlersविशेष तत्व में ईवेंट को जोड़ने से बचना चाहिए , इसके बजाय, आपको एक प्रत्यायित ईवेंट प्लेयर का उपयोग करना चाहिए, जैसे

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

डेमो।

इसलिए, यदि आप एक ही वर्ग के सैकड़ों तत्वों को बनाते हैं और उन्हें जोड़ते हैं, myClassतो ईवेंट हैंडलिंग के लिए कम मेमोरी का उपभोग किया जाएगा, क्योंकि सभी गतिशील रूप से सम्मिलित तत्वों के लिए काम करने के लिए केवल एक हैंडलर होगा।

अद्यतन: चूंकि हम गतिशील तत्व बनाने के लिए निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

लेकिन sizeविशेषता इस दृष्टिकोण का उपयोग करके jQuery-1.8.0या बाद में सेट नहीं की जा सकती है और यहां एक पुरानी बग रिपोर्ट है , इस उदाहरण को देखें jQuery-1.7.2जिसमें दिखाया गया है कि sizeविशेषता 30उपरोक्त उदाहरण का उपयोग करने के लिए सेट है लेकिन उसी दृष्टिकोण का उपयोग करके हम sizeविशेषता का उपयोग कर सेट नहीं कर सकते हैं jQuery-1.8.3, यहां एक गैर-काम करने वाला बेला है । इसलिए, sizeविशेषता सेट करने के लिए, हम निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

या यह एक

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

हम पारित कर सकते हैं attr/propएक बच्चे को वस्तु के रूप में, लेकिन यह काम करता है jQuery-1.8.0 and laterसंस्करण की जाँच इस उदाहरण है, लेकिन यह काम नहीं करेगा में jQuery-1.7.2 or earlier(सभी पिछले संस्करणों में परीक्षण नहीं)।

jQueryबग रिपोर्ट से लिया गया बीटीडब्ल्यू

कई समाधान हैं। सबसे पहले इसका उपयोग नहीं करना है, क्योंकि यह आपको कोई स्थान नहीं बचाता है और इससे कोड की स्पष्टता में सुधार होता है:

उन्होंने निम्नलिखित दृष्टिकोण का उपयोग करने की सलाह दी ( पहले वाले कार्यों में भी, परीक्षण किया गया 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

इसलिए, इस दृष्टिकोण का उपयोग करना बेहतर है, आईएमओ। यह अद्यतन करने के बाद मैंने पढ़ा / पाया जाता है इस सवाल का जवाब और इस उत्तर के शो में है कि आप का उपयोग करता है, तो 'Size'(capital S)बजाय 'size'तो यह होगा सिर्फ काम ठीक है, यहाँ तक मेंversion-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

प्रोप के बारे में भी पढ़ें , क्योंकि एक अंतर है Attributes vs. Properties, यह संस्करणों के माध्यम से भिन्न होता है।

Comments

यह $ ('<div />', {.........}) किस प्रकार का सिंटैक्स है, मैंने इसकी तलाश की है और मुझे $ ('<div>)' का उपयोग करके कुछ ऐसा ही मिला है। {......})?

— राफेल रुइज टैबरेस

@ RafaelRuizTabares में, $('<div>', {...})आप एक ऑब्जेक्ट पास कर रहे हैं जिसमें सभी विशेषताएँ हैं और $('<div>').attr({...})आप बिना किसी विशेषता के एक तत्व बना रहे हैं लेकिन attr()बाद में विधि का उपयोग करके विशेषताओं को सेट कर रहे हैं ।

— अल्फा

@ TheAlpha जहाँ मैं {} के अंदर क्या लिख ​​सकता हूँ उसके बारे में जानकारी पा सकता हूँ? क्योंकि मुझे लगता है कि वे विशेषताएँ और घटनाएँ हैं, लेकिन <div> के लिए आप html का भी उपयोग करते हैं। धन्यवाद!

— राफेल रुइज टैबरेस

खोज jQuery.comवेब साइट सहायक हो सकती है @ RafaelRuizTabares, या Google इसे :-)

— अल्फा

यह अब तक का सबसे साफ तरीका है! संभवत: तेज तरीका नहीं है लेकिन निश्चित रूप से कम त्रुटि स्ट्रिंग को प्रभावित करती है। धन्यवाद @TheAlpha

— एरेस

Answer 4

दरअसल, यदि आप कर रहे हैं $('<div>'), तो jQuery भी उपयोग करेगा document.createElement()।

(बस लाइन 117 पर एक नज़र डालें )।

कुछ फ़ंक्शन-कॉल ओवरहेड है, लेकिन जब तक प्रदर्शन महत्वपूर्ण नहीं होता है (आप सैकड़ों [हजारों] तत्वों का निर्माण कर रहे हैं), सादे डोम पर वापस लौटने का बहुत कारण नहीं है ।

बस एक नए वेबपेज के लिए तत्वों का निर्माण शायद एक ऐसा मामला है जिसमें आप सबसे अच्छा काम करने के jQuery के तरीके से चिपके रहेंगे ।

Answer 5

यदि आपके पास बहुत सी HTML सामग्री (केवल एक div से अधिक) है, तो आप HTML को एक छिपे हुए कंटेनर के भीतर पृष्ठ में बनाने पर विचार कर सकते हैं, फिर इसे अपडेट कर सकते हैं और आवश्यकता पड़ने पर इसे दृश्यमान बना सकते हैं। इस तरह, आपके मार्कअप का एक बड़ा हिस्सा ब्राउज़र द्वारा प्री-पार्स किया जा सकता है और जब कॉल किया जाता है, तो उसे जावास्क्रिप्ट द्वारा टाल दिया जाता है। उम्मीद है की यह मदद करेगा!

Comments

सलाह के लिए धन्यवाद। मैंने पहले इस दृष्टिकोण का उपयोग किया है, हालांकि इस विशेष मामले में मैं विशेष रूप से तत्वों को बनाने के बारे में जानना चाहता हूं।

— डार्को जेड

Answer 6

यह सवाल का सही जवाब नहीं है लेकिन फिर भी मैं इसे साझा करना चाहूंगा ...

document.createElement('div')जब आप फ्लाइ पर बहुत सारे तत्व बनाना चाहते हैं और डोम को जोड़ना चाहते हैं, तो बस और JQuery का उपयोग करने से प्रदर्शन में बहुत सुधार होगा।

Answer 7

मुझे लगता है कि आप सबसे अच्छी विधि का उपयोग कर रहे हैं, हालांकि आप इसे इसके लिए अनुकूलित कर सकते हैं:

 $("<div/>");

Answer 8

आपको एक ऑपरेशन से कच्चे प्रदर्शन की आवश्यकता नहीं है जो आप सीपीयू के दृष्टिकोण से बेहद अनूठे ढंग से करेंगे।

Comments

निर्भर करता है कि आप इसे कितनी बार कर रहे हैं।

— रिच ब्रैडशॉ

ओपी एक मोडल पॉपअप बना रहा है । यह ऑपरेशन प्रति सेकंड हजारों बार दोहराया नहीं जाता है। इसके बजाय, यह शायद हर कुछ सेकंड में एक बार दोहराया जाता है, अधिकतम पर। jQuery(html :: String)विधि का उपयोग करना पूरी तरह से ठीक है। जब तक स्थिति अत्यंत असामान्य है, एक बेहतर ढंग से प्राप्त करने की संभावना नहीं किया जाएगा कथित प्रदर्शन। उन मामलों पर अनुकूलन ऊर्जा खर्च करें जो इसका उपयोग कर सकते हैं। इसके अतिरिक्त, jQuery कई तरीकों से गति के लिए अनुकूलित है। इसके साथ चीजों को समझो, और विश्वास करो-लेकिन इसे तेजी से सत्यापित करने के लिए।

— 2:24 पर yfeldblum

Answer 9

आपको यह समझना होगा कि तत्व निर्माण प्रदर्शन का महत्व पहली जगह में jQuery का उपयोग करने के संदर्भ में अप्रासंगिक है।

ध्यान रखें, कोई तत्व बनाने का कोई वास्तविक उद्देश्य नहीं है जब तक कि आप वास्तव में इसका उपयोग नहीं करने जा रहे हों।

आप $(document.createElement('div'))बनाम जैसे प्रदर्शन परीक्षण के लिए लुभाए जा सकते हैं $('<div>')और उपयोग करने से शानदार प्रदर्शन प्राप्त कर सकते हैं$(document.createElement('div')) लेकिन यह सिर्फ एक तत्व है जो अभी तक डोम में नहीं है।

हालांकि, दिन के अंत में, आप वैसे भी तत्व का उपयोग करना चाहते हैं, इसलिए वास्तविक परीक्षा में f.ex शामिल होना चाहिए। ।जोङना();

आइए देखें, यदि आप एक दूसरे के खिलाफ निम्नलिखित परीक्षण करते हैं:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

आप देखेंगे कि परिणाम अलग-अलग होंगे। कभी-कभी एक तरीका दूसरे की तुलना में बेहतर प्रदर्शन करता है। और यह केवल इसलिए है क्योंकि समय के साथ आपके कंप्यूटर पर पृष्ठभूमि कार्यों की मात्रा बदल जाती है।

यहां खुद को परखें

इसलिए, दिन के अंत में, आप एक तत्व बनाने का सबसे छोटा और सबसे पठनीय तरीका चुनना चाहते हैं। इस तरह, कम से कम, आपकी स्क्रिप्ट फाइलें सबसे छोटी संभव होंगी। डोम में उपयोग करने से पहले एक तत्व बनाने के तरीके की तुलना में प्रदर्शन बिंदु पर संभवतः अधिक महत्वपूर्ण कारक।

Comments

मुझे पता है कि यह पुराना है, लेकिन पहले उदाहरण में jQuery की कोई आवश्यकता नहीं है:document.getElementById('target).appendChild(document.createElement('div'));

— 18

Answer 10

किसी ने पहले से ही एक बेंचमार्क बनाया है: jQuery document.createElement बराबर?

$(document.createElement('div')) बड़ा विजेता है।

Answer 11

एक बिंदु यह है कि ऐसा करना आसान हो सकता है:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

फिर jquery कॉल के साथ वह सब करने के लिए।

Answer 12

मैं jquery.min v2.0.3 का उपयोग कर रहा हूं। निम्नलिखित का उपयोग करना मेरे लिए बेहतर है:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

निम्नलिखित के रूप में:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

पहले कोड का प्रसंस्करण समय दूसरे कोड की तुलना में बहुत कम है।