مسج:أسرع إدراج DOM؟

Question

لقد حصلت على هذا الشعور السيئ حول كيفية إدراج كميات أكبر من HTML.لنفترض أننا حصلنا على:

var html="<table>..<a-lot-of-other-tags />..</table>"

وأريد أن أضع هذا في

$("#mydiv")

سابقا فعلت شيئا من هذا القبيل

var html_obj = $(html); $("#mydiv").append(html_obj);

هل صحيح أن jQuery يقوم بالتحليل html لإنشاء كائنات DOM؟حسنًا، هذا ما قرأته في مكان ما (تحديث: قصدت أنني قرأت أن jQuery يوزع HTML لإنشاء شجرة DOM بأكملها يدويًا - هذا هراء أليس كذلك؟!), ، لذلك قمت بتغيير الكود الخاص بي:

$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);

يشعر بشكل أسرع، أليس كذلك؟وهل صحيح أن هذا يعادل:

document.getElementById("mydiv").innerHTML += html ؟أم أن jquery يقوم ببعض الأشياء الإضافية باهظة الثمن في الخلفية؟

أحب أن أتعلم البدائل أيضًا.

Answer 1

إنnerHTML سريع بشكل ملحوظ، وفي كثير من الحالات سوف تحصل على أفضل النتائج بمجرد تعيين ذلك (سأستخدم الإلحاق فقط).

ومع ذلك، إذا كان هناك الكثير بالفعل في "mydiv"، فأنت تجبر المتصفح على تحليل كل هذا المحتوى وعرضه مرة أخرى (كل ما كان موجودًا من قبل، بالإضافة إلى كل المحتوى الجديد الخاص بك). يمكنك تجنب ذلك عن طريق إلحاق جزء من المستند بـ "mydiv" بدلاً من ذلك:

var frag = document.createDocumentFragment();
frag.innerHTML = html;
$("#mydiv").append(frag);

بهذه الطريقة، يتم تحليل المحتوى الجديد فقط (لا مفر منه) ولا يتم تحليل المحتوى الحالي.

يحرر:خطأي...لقد اكتشفت أن لغة HTML الداخلية غير مدعومة بشكل جيد في أجزاء المستند.يمكنك استخدام نفس التقنية مع أي نوع عقدة.على سبيل المثال، يمكنك إنشاء عقدة الجدول الجذر وإدراج HTML الداخلي فيها:

var frag = document.createElement('table');
frag.innerHTML = tableInnerHtml;
$("#mydiv").append(frag);

Answer 2

حاول القيام بما يلي:

$("#mydiv").append(html);

الإجابات الأخرى، بما في ذلك الإجابة المقبولة، هي أبطأ بواسطة 2-10x: com.jsperf.

الإجابة المقبولة لا تعمل في آي إي 6 و 7 و 8 لأنه لا يمكنك تعيين innerHTML من أ <table> العنصر، بسبب خطأ في IE: com.jsbin.

Answer 3

ما الذي تحاول تجنبه؟"الشعور السيئ" غامض بشكل لا يصدق.إذا سمعت أن "DOM بطيء" وقررت "تجنب DOM"، فهذا مستحيل.ستؤدي كل طريقة لإدراج التعليمات البرمجية في الصفحة، بما في ذلك لغة HTML الداخلية، إلى إنشاء كائنات DOM.DOM هو تمثيل المستند في ذاكرة متصفحك.أنت يريد كائنات DOM المراد إنشاؤها.

السبب الذي يجعل الناس يقولون "DOM بطيء" هو إنشاء العناصر باستخدام document.createElement(), ، وهي واجهة DOM الرسمية لإنشاء العناصر، وهي أبطأ من استخدام خاصية InternalHTML غير القياسية في بعض المتصفحات.هذا لا يعني أن إنشاء كائنات DOM أمر سيء، فهو كذلك ضروري لإنشاء كائنات DOM، وإلا فإن التعليمات البرمجية الخاصة بك لن تفعل أي شيء على الإطلاق.

Answer 4

الإجابة حول استخدام جزء DOM تسير على الطريق الصحيح.إذا كان لديك مجموعة من كائنات html التي تقوم بإدراجها باستمرار في DOM، فسترى بعض التحسينات في السرعة باستخدام الجزء.يشرح هذا المنشور الذي كتبه John Resig ذلك جيدًا:http://ejohn.org/blog/dom-documentfragments/

Answer 5

أسرع طريقة لإلحاق العناصر

أسرع طريقة للإلحاق بشجرة DOM هي تخزين كل ما قمت بإلحاقه مؤقتًا في جزء DOM واحد، ثم إلحاق جزء dom بالدوم.

هذه هي الطريقة التي أستخدمها في محرك لعبتي.

//Returns a new Buffer object
function Buffer() {

    //the framgment
    var domFragment = document.createDocumentFragment();

    //Adds a node to the dom fragment
    function add(node) {
        domFragment.appendChild(node);
    }

    //Flushes the buffer to a node
    function flush(targetNode) {

        //if the target node is not given then use the body
        var targetNode = targetNode || document.body;

        //append the domFragment to the target
        targetNode.appendChild(domFragment);

    }

    //return the buffer
    return {
        "add": add,
        "flush": flush
    }
}


//to make a buffer do this
var buffer = Buffer();

//to add elements to the buffer do the following
buffer.add(someNode1);

//continue to add elements to the buffer
buffer.add(someNode2);
buffer.add(someNode3);
buffer.add(someNode4);
buffer.add(someN...);

//when you are done adding nodes flush the nodes to the containing div in the dom
buffer.flush(myContainerNode);

باستخدام هذا الكائن، أستطيع عرض 1000 عنصر تقريبًا على الشاشة 40 مرة في الثانية في Firefox 4.

وهنا حالة الاستخدام.

Answer 6

بالنسبة للمبتدئين، اكتب نصًا يحسب الوقت المستغرق للقيام بذلك 100 أو 1000 مرة بكل طريقة.

للتأكد من عدم تحسين التكرارات بطريقة ما - لست خبيرًا في محركات JavaScript - قم بتغيير HTML الذي تقوم بإدخاله في كل مرة، على سبيل المثال عن طريق وضع "0001" ثم "0002" ثم "0003" في مكان معين خلية الجدول.

Answer 7

أقوم بإنشاء سلسلة عملاقة ثم ألحق هذه السلسلة باستخدام jquery.يعمل بشكل جيد وسريع بالنسبة لي.

Answer 8

لقد ذكرت أنك مهتم بالبدائل.إذا نظرت إلى قائمة ملحقات jQuery ذات الصلة بـ DOM ستجد العديد من البرامج المخصصة لإنشاء أشجار DOM برمجيًا.انظر على سبيل المثال سوبرفلايدوم أو منشئ عناصر DOM;ولكن هناك آخرون.