วิธีที่มีประสิทธิภาพที่สุดในการสร้างองค์ประกอบ HTML โดยใช้ jQuery คืออะไร

เมื่อเร็ว ๆ นี้ฉันได้ทำป๊อปอัปหน้าต่างโมดอลมากมายและอะไรที่ฉันใช้ jQuery วิธีการที่ฉันใช้ในการสร้างองค์ประกอบใหม่บนหน้าเว็บนั้นมีมากมายตามแนวของ:

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

อย่างไรก็ตามฉันรู้สึกว่านี่ไม่ใช่วิธีที่ดีที่สุดหรือมีประสิทธิภาพมากที่สุดในการทำเช่นนี้ อะไรคือวิธีที่ดีที่สุดในการสร้างองค์ประกอบใน jQuery จากมุมมองประสิทธิภาพ

คำตอบนี้มีเกณฑ์มาตรฐานสำหรับคำแนะนำด้านล่าง

ฉันใช้การ$(document.createElement('div')); เปรียบเทียบการแสดงเทคนิคนี้เป็นวิธีที่เร็วที่สุด ฉันคิดว่านี่เป็นเพราะ jQuery ไม่จำเป็นต้องระบุว่าเป็นองค์ประกอบและสร้างองค์ประกอบเอง

คุณควรใช้การวัดประสิทธิภาพด้วยเครื่องมือ Javascript ที่แตกต่างกันและชั่งน้ำหนักผู้ชมด้วยผลลัพธ์ ตัดสินใจจากที่นั่น

ส่วนตัวฉันขอแนะนำ (สำหรับการอ่าน):

$('<div>');

ตัวเลขบางตัวเกี่ยวกับข้อเสนอแนะ (ซาฟารี 3.2.1 / mac os x):

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              

คำถาม:

วิธีที่มีประสิทธิภาพที่สุดในการสร้างองค์ประกอบ HTML โดยใช้ jQuery คืออะไร

ตอบ:

เนื่องจากมันเกี่ยวกับ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(ไม่ได้ทดสอบในทุกรุ่นก่อนหน้า)

BTW นำมาจากjQueryรายงานข้อผิดพลาด

มีหลายวิธี สิ่งแรกคืออย่าใช้งานเลยเพราะมันไม่ได้ช่วยให้คุณประหยัดพื้นที่และนี่ช่วยปรับปรุงความชัดเจนของรหัส:

พวกเขาแนะนำให้ใช้วิธีการต่อไปนี้ ( ทำงานในวิธีก่อนหน้าเช่นกันทดสอบด้วย1.6.4)

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

ดังนั้นจึงเป็นการดีกว่าที่จะใช้วิธีนี้ IMO การอัปเดตนี้เกิดขึ้นหลังจากที่ฉันอ่าน / พบคำตอบนี้และในคำตอบนี้แสดงให้เห็นว่าหากคุณใช้'Size'(capital S)แทนที่จะเป็น'size'แล้วมันก็จะทำงานได้ดีแม้ในversion-2.0.2

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

อ่านเกี่ยวกับเสาเพราะมีความแตกต่างกันAttributes vs. Propertiesมันแตกต่างกันไปตามรุ่น

ที่จริงแล้วถ้าคุณทำ$('<div>')jQuery ก็จะใช้เช่นกันdocument.createElement()เช่นกัน

(ดูที่บรรทัดที่ 117 )

มีค่าใช้จ่ายในการเรียกใช้ฟังก์ชัน แต่มีประสิทธิภาพที่สำคัญ (คุณกำลังสร้างองค์ประกอบหลายแสน [พัน]) ไม่มีเหตุผลมากที่จะเปลี่ยนกลับเป็นDOMธรรมดา DOM

เพียงแค่การสร้างองค์ประกอบสำหรับหน้าเว็บใหม่อาจเป็นกรณีที่คุณควรทำตามjQueryในการทำสิ่งต่าง ๆ

หากคุณมีเนื้อหา HTML จำนวนมาก (มากกว่า div เดียว) คุณอาจลองสร้าง HTML ในหน้าภายในคอนเทนเนอร์ที่ซ่อนไว้จากนั้นอัปเดตและทำให้มองเห็นได้เมื่อจำเป็น ด้วยวิธีนี้ส่วนใหญ่ของมาร์กอัปของคุณสามารถแยกวิเคราะห์ล่วงหน้าโดยเบราว์เซอร์และหลีกเลี่ยงการจมลงโดย JavaScript เมื่อมีการเรียก หวังว่านี่จะช่วยได้!

นี่ไม่ใช่คำตอบที่ถูกต้องสำหรับคำถาม แต่ฉันยังต้องการแชร์สิ่งนี้ ...

ใช้เพียง document.createElement('div')ข้าม JQuery จะช่วยเพิ่มประสิทธิภาพได้มากขึ้นเมื่อคุณต้องการสร้างองค์ประกอบจำนวนมากในทันทีและผนวกเข้ากับ DOM

ฉันคิดว่าคุณกำลังใช้วิธีที่ดีที่สุดแม้ว่าคุณจะสามารถปรับให้เหมาะสมกับ:

 $("<div/>");

คุณไม่ต้องการประสิทธิภาพดิบจากการดำเนินการคุณจะทำงานไม่บ่อยนักจากมุมมองของ CPU

คุณจะต้องเข้าใจว่าความสำคัญของประสิทธิภาพการสร้างองค์ประกอบนั้นไม่เกี่ยวข้องในบริบทของการใช้ jQuery ตั้งแต่แรก

โปรดทราบว่าไม่มีวัตถุประสงค์ที่แท้จริงในการสร้างองค์ประกอบเว้นแต่ว่าคุณจะใช้งานจริง

คุณอาจถูกล่อลวงให้ทดสอบประสิทธิภาพเช่น$(document.createElement('div'))vs. $('<div>')และรับประสิทธิภาพที่ยอดเยี่ยมจากการใช้$(document.createElement('div'))แต่นั่นเป็นเพียงองค์ประกอบที่ยังไม่ได้อยู่ใน DOM

อย่างไรก็ตามในตอนท้ายของวันคุณจะต้องการใช้องค์ประกอบต่อไปดังนั้นการทดสอบจริงควรรวม f.ex .appendTo ();

ลองดูถ้าคุณทดสอบสิ่งต่อไปนี้กับแต่ละอื่น ๆ :

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

คุณจะสังเกตเห็นผลลัพธ์จะแตกต่างกันไป บางครั้งวิธีการหนึ่งก็มีประสิทธิภาพดีกว่าวิธีอื่น และนี่เป็นเพราะปริมาณงานพื้นหลังในคอมพิวเตอร์ของคุณเปลี่ยนไปตามเวลา

ทดสอบด้วยตัวเองที่นี่

ดังนั้นในตอนท้ายของวันคุณต้องการเลือกวิธีที่เล็กที่สุดและอ่านง่ายที่สุดในการสร้างองค์ประกอบ ด้วยวิธีนี้อย่างน้อยไฟล์สคริปต์ของคุณจะเล็กที่สุดเท่าที่จะเป็นไปได้ อาจเป็นปัจจัยที่มีความสำคัญมากกว่าในจุดประสิทธิภาพมากกว่าวิธีการสร้างองค์ประกอบก่อนที่คุณจะใช้องค์ประกอบใน DOM

มีคนสร้างมาตรฐาน: jQuery document.createElement ที่เทียบเท่าแล้วหรือยัง

$(document.createElement('div')) เป็นผู้ชนะที่ยิ่งใหญ่

ประเด็นหนึ่งคือมันอาจจะง่ายกว่าที่จะทำ:

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

จากนั้นให้ทำทุกสิ่งด้วย jquery call

ฉันใช้ 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);

เวลาประมวลผลของรหัสแรกต่ำกว่ารหัสที่สองมาก