كفاءة إطار عمل jQuery/JavaScript

Question

يستخدم مشروعي الأخير إطار عمل JavaScript (JQuery) ، إلى جانب بعض الإضافات (التحقق من الصحة ، JQuery-Ui ، DatePicker ، Facebox ، ...) للمساعدة في عمل تطبيق ويب حديث.

أجد الآن صفحات تحميل أبطأ مما اعتدت عليه. بعد بعض التنميط JS (شكرًا VS2010!) ، يبدو أن هناك الكثير من الوقت يتم معالجته داخل الإطار.

الآن أفهم أن أدوات واجهة المستخدم أكثر تعقيدًا ، فكلما زاد عدد أدوات المعالجة. لم يكن المشروع بعد مرحلة كبيرة وأعتقد أنه سيكون وظائف متوسط. في هذه المرحلة ، أستطيع أن أرى أنه لن يتوسع جيدًا.

لقد لاحظت أشياء مثل أمر "كل" في jQuery يستغرق الكثير من وقت المعالجة.

هل عانى آخرون من بعض الكمون الإضافي باستخدام أطر عمل JS؟ كيف يمكنني تقليل تأثيرها على أداء الصفحة؟ هل هناك أفضل الممارسات في التنفيذ باستخدام أطر عمل JS؟

شكرًا

Answer 1

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

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

تقدم الأطر زمن انتقال إضافي حيث يوجد عادةً عدد من الوظائف التي يتم تنفيذها نتيجة لاستخدام وظيفة نقطة الدخول في استخدامها.

تعديل:

بعض النقاط العامة فيما يتعلق باستخدام jQuery:

1. تخطي كائنات jQuery الخاصة بك في المتغيرات المحلية إذا كنت ستستخدمها أكثر من مرة. يعد الاستعلام عن DOM عملية مكلفة نسبيًا وبالتالي يجب القيام بها أقل من اللازم. إذا كان لديك محددات ذات صلة ، فقم بإلقاء نظرة على إجراء اختيار واسع ثم استخدام طرق مثل find(), filter() next(), prev() إلخ لتصفية المجموعة للحصول على العناصر ذات الصلة التي كنت قد استخدمتها وظيفة المحدد الأخرى للحصول عليها.

2. inside من الوظائف ، لا تلف الكائنات في كائنات jQuery دون داع. إذا كانت هناك طريقة متصفح متقاطعة للوصول إلى قيمة خاصية كائن موثوقة ، فاستخدم ذلك. على سبيل المثال ، خاصية القيمة لإدخال النص htmlelement

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 }); 

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