كيفية تحسين أداء مسج؟ ملخص طرق التحسين

كيفية البدء سريعًا باستخدام VUE3.0: ادخل إلى التعلم

لقد كنت أبحث عن نصائح حول تحسين أداء jQuery لجعل تطبيق الويب الديناميكي المتضخم الخاص بي أخف وزنًا. بعد البحث في العديد من المقالات، قررت أن أدرج بعضًا من أفضل الاقتراحات وأكثرها استخدامًا لتحسين الأداء. [التعلم الموصى به: فيديو تعليمي لـ jQuery]

1. اقتراحات لتحسين أداء المحدد

1. ترث دائمًا من محدد #id

هذه قاعدة ذهبية لمحددات jQuery. أسرع طريقة لتحديد عنصر في jQuery هي تحديده بواسطة المعرف.

2. استخدم العلامة أمام الفصل

ثاني أسرع محدد في jQuery هو محدد العلامات (مثل $('head'))، لأنه يأتي مباشرة من طريقة Javascript الأصلية getElementByTagName(). لذلك من الأفضل استخدام العلامات دائمًا لتعديل الفئات (ولا تنسَ أقرب معرف).

محدد الفئة في jQuery هو الأبطأ، لأنه سيجتاز جميع عقد DOM في متصفح IE. حاول تجنب استخدام محددات الفئة. لا تستخدم العلامات لتعديل المعرفات أيضًا.

3. استخدم الاستعلامات الفرعية

لتخزين الكائنات الأصلية مؤقتًا لاستخدامها في المستقبل

4. قم بتحسين المحددات للتكيف مع نموذج Sizzle "من اليمين إلى اليسار"

منذ الإصدار 1.3، يستخدم jQuery مكتبة Sizzle، وهي نفس الإصدارات السابقة في محرك المحدد التعبيرات مختلفة جدا. فهو يستبدل النموذج "من اليمين إلى اليسار" بنموذج "من اليسار إلى اليمين".

5.

من الأسرع بالفعل استخدام find() بدلاً من استخدام السياق للعثور على وظيفة find(). ولكن إذا كانت الصفحة تحتوي على العديد من عقد DOM، فقد يستغرق البحث ذهابًا وإيابًا مزيدًا من الوقت:

6. استخدم عمليات السلسلة القوية

يعد استخدام عمليات السلسلة في jQuery أكثر فعالية من تخزين المحددات

7. اكتب محددك الخاص

إذا كنت تستخدم المحددات غالبًا الكود الخاص بك، لذا قم بتوسيع كائن $.expr[':'] الخاص بـ jQuery لكتابة المحددات الخاصة بك.

2. اقتراحات لتحسين عمليات DOM

8. قم بتخزين كائنات jQuery وعناصر

ذاكرة التخزين المؤقت التي تستخدمها غالبًا

9. عند الإدراج في DOM، قم بتغليف جميع العناصر في عنصر واحد.

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

10. على الرغم من أن jQuery لا يطرح استثناءات، إلا أنه يجب على المطورين أيضًا التحقق من الكائنات.

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

11. استخدم الدوال المباشرة بدلاً من الدوال المكافئة

للحصول على أداء أفضل، يجب عليك استخدام الدوال المباشرة مثل .ajax() بدلاً من .ajax(). لا تستخدم .get(),.getJSON(). .getJSON(),.getJSON(),.post()، لأن الأخيرة ستستدعي $.ajax().

12.

قم بتخزين نتائج jQuery لاستخدامها لاحقًا.

-

يمكنك استخدام App

ننسى استخدام وظيفة .data() لتخزين المعلومات

14. استخدم وظيفة الأداة المساعدة jQuery

. لا تنس وظيفة الأداة المساعدة jQuery البسيطة والعملية. مفضلاتي هي $.isFunction() وisA rray() وisArray() وisArray() و.each().

15. قم بإضافة فئة "JS" إلى كتلة HTML

بعد تحميل jQuery، قم أولاً بإضافة فئة تسمى "JS" إلى HTML $('HTML').addClass('JS'); يمكنك إضافة أنماط CSS.

3. اقتراحات لتحسين أداء الحدث

16. قم بالتأجيل إلى (window). يستخدم التحميل

أحيانًا (window).load. وأحيانًا يستخدم (window).load() بدلاً من $(document).ready . () أسرع لأن الأخير لا ينتظر حتى يتم تنزيل جميع عناصر DOM. يجب عليك اختباره قبل استخدامه.

17. استخدم تفويض الأحداث

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

18. استخدم اختصار الحدث الجاهز

إذا كنت تريد ضغط المكون الإضافي js وحفظ كل بايت، فيجب عليك تجنب استخدام $(document).onready()

4. اختبار jQuery

19. اختبار وحدة jQuery

أفضل طريقة للاختبار. رمز JavaScript مخصص لاستخدام الأشخاص تعال واختبر. ولكن يمكنك استخدام بعض الأدوات الآلية مثل Selenium وFuncunit وQUit وQMock لاختبار التعليمات البرمجية الخاصة بك (خاصة المكونات الإضافية). أريد أن أناقش هذا الموضوع في موضوع آخر لأن هناك الكثير مما يمكن قوله.

20. قم بتوحيد كود jQuery الخاص بك

قم بتوحيد الكود الخاص بك في كثير من الأحيان، وتعرف على الاستعلام الأبطأ، واستبدله. يمكنك استخدام وحدة التحكم Firebug. يمكنك أيضًا استخدام وظائف اختصار jQuery لتسهيل الاختبار

5. اقتراحات أخرى شائعة لتحسين أداء jQuery

21. استخدم أحدث إصدار من jQuery

غالبًا ما يكون الإصدار الأحدث هو الأفضل. بعد تغيير الإصدارات، لا تنس اختبار الكود الخاص بك. في بعض الأحيان لا يكون متوافقًا تمامًا مع الإصدارات السابقة.

22. استخدام HMTL5

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

23. إذا كنت تريد إضافة أنماط إلى أكثر من 15 عنصرًا، فإن

أفضل طريقة لإضافة علامات النمط مباشرةً إلى عناصر DOM هي استخدام وظيفة jQuey's css() لتصميم بعض العناصر. ومع ذلك، عند إضافة أنماط إلى أكثر من 15 عنصرًا، يكون من الأكثر فعالية إضافة علامات الأنماط مباشرة إلى DOM. تتجنب هذه الطريقة استخدام التعليمات البرمجية الثابتة في التعليمات البرمجية.

24. تجنب تحميل التعليمات البرمجية الزائدة عن الحاجة،

ومن الجيد وضع تعليمات برمجية Javascript في ملفات مختلفة وتحميلها فقط عند الحاجة إليها. بهذه الطريقة لن تقوم بتحميل التعليمات البرمجية والمحددات غير الضرورية. من السهل أيضًا إدارة التعليمات البرمجية.

25. قم بضغط ملف JS رئيسي واحد لتقليل عدد التنزيلات إلى الحد الأدنى.

عندما تحدد الملفات التي يجب تحميلها، قم بتجميعها في ملف واحد. استخدم بعض الأدوات مفتوحة المصدر للقيام بذلك تلقائيًا نيابةً عنك، مثل استخدام Minify (المتكامل مع كود الواجهة الخلفية الخاص بك) أو استخدام الأدوات عبر الإنترنت مثل JSCompressor أو YUI Compressor أو Dean Edwards JS packer لضغط الملفات نيابةً عنك. المفضل لدي هو JSCompressor.

26. من الرائع استخدام Javascript الأصلي عند الضرورة،

يعد استخدام jQuery أمرًا رائعًا، لكن لا تنس أنه إطار عمل لـ Javascript أيضًا. لذا، يمكنك استخدام وظائف Javascript الأصلية عند الضرورة في كود jQuery، مما يمكنه تحقيق أداء أفضل.

27. قم بتحميل إطار عمل jQuery من Google

عندما يتم إطلاق تطبيقك رسميًا، يرجى تحميل jQuery من Google CDN، لأنه يمكن للمستخدمين الحصول على الرمز من أقرب مكان. بهذه الطريقة يمكنك تقليل طلبات الخادم، وإذا كان المستخدم يتصفح موقع ويب آخر يستخدم أيضًا jQuery الخاص بـ Google CDN، فسيقوم المتصفح باستدعاء رمز jQuery على الفور من ذاكرة التخزين المؤقت.

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

[التعلم الموصى به: فيديو jQuery، تطوير الواجهة الأمامية للويب]

ما ورد أعلاه هو كيفية تحسين أداء jQuery؟ للحصول على تفاصيل حول ملخص طرق التحسين، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني لمزيد من المعلومات!