JavaScript / DOM - كم تكلف مكلفة خلق مقابل ترتيب العقد دوم؟

Question

أحاول تحسين جدول قابلا للتراجع. عنق الزجاجة في التلاعب في الدوم. أقوم حاليا بإنشاء صفوف جدول جديدة وإدخالها في كل مرة أفرز فيها الجدول. أتساءل ما إذا كنت قد أكون قادرا على تسريع الأمور من خلال إعادة ترتيب الصفوف البسيطة، وليس إعادة إنشاء العقد. بالنسبة لهذا لإجراء فرق كبير، يجب أن يكون إعادة ترتيب عقدة DOM Snappier الكثير من إنشاء العقدة. هل هذا هو الحال؟ شكرا، - morgan.

Answer 1

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

هذه الصفحة يشير إلى أنه سيكون الأسرع لاستنساخ الجدول الحالي، معالجته كما تريد، ثم استبدال الجدول على DOM.

Answer 2

أنا أرسم هذا الجدول حول مرتين الآن، باستخدام Innerhtml، وبناء المحتويات بأكملها كسلسلة، بدلا من إدراج العقد One-by-by.

Answer 3

قد تجد هذه الصفحة مفيدة لبعض المعايير:

http://www.quirksmode.org/dom/dom/innerhtml.html.

Answer 4

إذا استطعت، فمن الأفضل أن تقوم بمعالجة DOM غير كمعالجة DOM الفعلية، ولكن كأنها نوع من الأسلوب داخل البرنامج النصي الخاص بك ثم معالجة DOM. لذا بدلا من القيام بما يسمى إعادة رسم على كل عقدة واحدة، فإنك تتكتل عاتما عاتما على كل عقدة واحدة في طريقته الخاصة، ثم إرفاق تلك العقد في الوالد الذي سيتم إرفاقه بعد ذلك بالديم الفعلي، الناتج عن في اثنين من الطعن فقط بدلا من المئات. أقول اثنين من B / C تحتاج إلى تنظيف ما هو في DOM بالفعل قبل التحديث مع بياناتك الجديدة.

Answer 5

كنت أبحث عن إجابة على هذا وقررت إعداد معيار سريع http://jsfiddle.net/wheresrhys/2g6dn/6/

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