أفضل ستة ممارسات مسج لتحسين الأداء

مسج هو واحد من ال مكتبات JavaScript الأكثر شعبية اليوم. واجهة برمجة التطبيقات سهلة الاستخدام للغاية مما يؤدي إلى منحنى تعليمي غير حاد. يستخدم الكثير من المشروعات كود jQuery بدلاً من استخدام JavaScript لجرافيك vanilla لجلب وظائف ديناميكية.

لكن مسج لها أوجه القصور أيضا. يمكن أن يؤدي إلى بعض مشاكل الأداء إذا تم استخدامها بلا مبالاة تماما مثل اللغة التي تقوم عليها. سوف يعرض هذا المنشور بعضًا من أفضل الممارسات في استخدام jQuery والتي ستساعدنا في تجنب أي مشكلات في الأداء.

1. تحميل البرامج النصية كسول عند الحاجة

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

طريقة واحدة للقيام بذلك في jQuery باستخدام $ .getScript لتحميل أي ملف نصي في وقت حاجته بدلاً من تحميل الصفحة.

$ .getScript ("scripts / gallery.js" ، رد الاتصال) ؛ 

إنها وظيفة ajax ستحصل على ملف نصي واحد عندما تريد ذلك ، لكن لاحظ أن الملف الذي تم إحضاره لم يتم تخزينه مؤقتًا. لتمكين التخزين المؤقت ل getScript سيكون عليك تمكين نفسه لجميع طلبات اياكس. يمكنك القيام بذلك باستخدام الكود أدناه:

$ .ajaxSetup (cache: true) ؛ 

2. تجنب $ (window) .load () إذا كان البرنامج النصي الخاص بك لا يحتاج إلى أي موارد فرعية للصفحة

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

لذلك ، إذا كنت تكتب نصًا يعتمد على الموارد الفرعية للصفحة ، مثل تغيير لون خلفية أ شعبة تم تصميمه بواسطة ورقة أنماط خارجية ، من الأفضل استخدامه $ (window) .load ().

ولكن ، إذا لم يكن الأمر كذلك ، فمن الأفضل الالتزام به $ (مستند). جاهزة () لأنه ، مسج يدعو لها جاهز معالج الأحداث سواء كنت تستخدم $ (مستند). جاهزة () أم لا ، لذلك استخدمه عندما تستطيع.

3. استخدام فصل لإزالة العناصر من DOM التي تحتاج إلى تغيير.

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

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

ومسج فصل() يتيح لنا إزالة عنصر من الصفحة, الأمر مختلف عن إزالة() لأنه سيحفظ البيانات المرتبطة بالعنصر عندما يلزم إضافته إلى الصفحة لاحقًا. يمكن بعد ذلك وضع عنصر منفصل في الصفحة عند تعديله.

4. استخدام المغلق () لضبط الارتفاع أو العرض بدلاً من ارتفاع() و عرض()

إذا كنت تقوم بتعيين ارتفاع أو عرض عنصر في jQuery ، أقترح عليك استخدام المغلق () وظيفة لضبط تلك القيم باستخدام ارتفاع() و عرض() سوف يسبب تدفقات إضافية بسبب الوصول إلى بعض خصائص التخطيط في الوظيفة computeStyleTests في jQuery (تم اختباره في أحدث إصدار.).

للرمز p.height ( "300px")؛ هنا هي التدفقات.

إلى عن على p.css ("height": "300px") ؛

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

5. لا تصل إلى خصائص التخطيط دون داع

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

لذلك سواء كنت تستخدم jQuery أو JavaScript vanilla, حذار من الوصول إلى خصائص التخطيط دون داع خاصة في حلقة أو نتيجة بعد إجراء تغييرات على النمط.

6. الاستفادة من التخزين المؤقت حيث يمكنك

تأتي بعض وظائف jQuery مع آليات للتخزين المؤقت يمكن استخدامها بشكل جيد. تقوم طلبات Ajax بتخزين الموارد مؤقتًا ، ولكنها غير متوفرة لـ النصي و jsonp, لذلك إذا كنت تريد التخزين المؤقت في جميع طلبات ajax ، فقد ترغب في ذلك ضعها على مستوى العالم مثل أدناه.

لاحظ أيضًا أنه إذا جلبت موارد باستخدام بريد لن يتم تخزينه مؤقتًا حتى إذا قمت بتمكين التخزين المؤقت باستخدام الإعداد أعلاه.

كما ذكرت من قبل, فصل() تخزين البيانات المرتبطة بالعنصر المراد إزالته على عكس إزالة().إخفاء() يخبئ CSS الأولي عرض قيمة عنصر قبل إخفاءه بحيث يمكن استعادته لاحقًا دون فقد البيانات.

استنتاج

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

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