IE6 مشكلات في الأداء مع إضافة className على عناصر متعددة (مسج tableHover المساعد)

Question

في تطبيق أكتب استخدام HTML الجدول من أعداد التصميم يتطلب أن الصف و العمود من حامت الخليوي سيتم تسليط الضوء عليها.

لقد وضع كل JS لهذا المشروع باستخدام مسج 1.3.x, ووجدت tableHover البرنامج المساعد الذي يفعل بالضبط ما أريد.

ولكن:

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

أعتقد أن المشاكل تكمن في البرنامج المساعد و أنا فعلا غيرت انها وظيفة كاملة من الصفر, فقط ليكتشف أن لدي نفس مشكلات في الأداء.

بعد التصحيح رمز أعرف الآن أن اختيار كمية كبيرة من العناصر بالإضافة إلى تطبيق className (مسج.addClass()) بطيئة للغاية على IE6.

حاولت استخدام مسج.css() بدلا من ذلك فقط لون الخلفية, أداء أفضل, ولكن مرة أخرى, عندما يكون عدد خلايا الجدول ارتفاع أداء قطرات حالة غير صالحة للاستعمال على جميع المتصفحات الأخرى أداء مسج.css() هو الطريقة أبطأ من مسج.addClass().

المشكلة الرئيسية هنا هي أنه لا يوجد أي مشترك الأم إلى عمود الجدول في نمط عمود واحد يحتاج إلى اجتياز الجدول بأكمله ، حدد كل صف ثم العثور على الحق nth-child td.بلدي رمز مسج من أجل هذا يبدو مثل هذا:

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

لن لصق كامل الكود هنا لأنه ليس له علاقة لهذه المسألة.الجواب الوحيد الذي أبحث عنه هو:هل هناك من يعرف الطريقة أن أفعل ما أريد في تحسين الأداء في الهامش ؟ أنا لا أبحث عن "كروم" سرعة الأداء, مجرد شيء أسرع من "عدم استجابة".

Thnaks

توم.

Answer 1

تعاملت مع الأداء مجمع مسج على جداول كبيرة في IE6.هنا هو ما يمكن أن نقدمه لك من حيث مساعدة:

• ترميز بقدر البيانات في html ممكن.على سبيل المثال, ترميز رقم الصف و العقيد الأرقام في TDs فئة أو اسم السمة
• إضافة ماوس المستمع إلى كامل الجدول ثم استخدام الحدث.الهدف الحصول على TDs
• تحليل موقع الخلية التي تحوم شكل نقطة #1
• مرة أخرى, سوف يكون على الأرجح إضافة طن من الطبقات ، ولكن فئة لكل عمود و كل صف ، وبهذه الطريقة يمكنك تحديد كل من كامل الصف و العمود بأكمله مع 2 محددات الطبقة ، إضافة css لهم
• ذاكرة التخزين المؤقت قدر الإمكان.إذا كان المستخدم يتحرك من خلية واحدة إلى أخرى ، والتحقق من إذا كان في صف لديك بالفعل تسليط الضوء عليها.أعتقد أن هذا هو الى حد كبير يضمن أن يحدث ، لذلك سيكون لديك 1/2 محدد العمليات
• ذاكرة التخزين المؤقت بالكامل الأعمدة التي قمت بتحديدها ، لذلك لم يكن لديك لتحديد مرتين نفس الصفوف
• تحقق من هذه الاستجابة البرنامج المساعد كتبت قد ترغب في استخدامه.
• أيضا ، هناك آخر بعد أن كتبت عن هذا الموضوع من كتابة سريعة الإضافات مسج.

Answer 2

تقليل عدد className التغييرات اللاحقة ينحسر عن طريق السماح للمتصفح CSS مطابقة المحرك للقيام بهذا العمل بالنسبة لك.على سبيل المثال ، 3x3 الجدول:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

الآن كل ما عليك القيام به هو تعيين className على الجدول الخارجي على "sel-الصف-(num) sel-col-(num)" و جميع خلايا سيتم تحديث مرة واحدة ، والتي سوف تكون أسرع بكثير من حلقات ووضع الطبقات.

على عدد كبير جدا من الأعمدة/الصفوف كمية البيانات في الأنماط يمكن أن يصبح غير عملي.يمكنك الحصول على حول هذا قليلا قبل حيوي تغيير النظام في الأنماط من خلال الوثيقة.الأنماط القائمة ، ولكن هذا يستغرق بعض عبر متصفح عمل مسج لن تساعدك مع.أو طاولة مع العديد من الصفوف ولكن بعض الأعمدة ، يمكنك وضع المحدد في الصف فئة مباشرة على الصف فقط العمود تسليط الضوء على هذا الطريق والتي لا تزال فقط 2-3 الدرجة التغييرات.

(سيكون من الرائع لو تمكنا من استخدام CSS3 nth-child محدد كما فعلت في مسج محدد ، ولكن دعم المتصفح ليس هناك حتى الآن.)

Answer 3

أتساءل عما إذا كان في البحث عن أفضل استجابة من مسج, أنت لا ترى الغابة من الأشجار ؟

لماذا لا تشمل <colgroup> عنصر في الجزء العلوي من الجدول الخاص بك (سواء صراحة أو إذا لزم الأمر بإضافة بشكل حيوي مع مسج) ثم تعيين لون الخلفية قيمة العمود مطابقة اخترتها الخلية المؤشر ؟

IE6 لا تدعم <colgroup> العنصر, ولكن فقط في خصائص محدودة.بيد أن لون الخلفية هو واحد من تلك المعتمدة لذلك هذا يجب أن نرى تحسنا كبيرا في الأداء الخاص بك.

Answer 4

يجب أن يكون لاحظت هذا - أنا أفضل بكثير CSS/HTML المطور من جافا سكريبت واحد ، حاولت كل غير النصي طريقة أعرف قبل حفر في JS.

أنا فعلا بدأت من colgroup, أنا حتى الأعمدة على نفس الطاولة ، ولكن colgroup و col عناصر مجموعة بصريا وراء عناصر الجدول ، حتى إذا tbody, tr, td أو أي عنصر آخر في الطاولة الخلفية (في حالتي ، وكثير منهم قد) ، colgroup لن تظهر أكثر من هذه العناصر ، وأنه لم يرد على المواقع أو أي دولة أخرى متقدمة CSS التلاعب حاولت التقدم على ذلك.