الأداء هو أحد أهم المشكلات التي تواجه مطوري الويب أو تطبيقات الويب. لن يكون هناك أحد سعيدًا بالتطبيق أو الصفحة التي تم تحميلها على مر العصور والتي تتعطل من التحميل الزائد. مستخدمو موقع الويب ليسوا مستعدين للانتظار طويلًا لتنزيلاتهم أو لجعل صفحاتهم في حالة صالحة للعمل. وفقًا لـ
Kissmetrics ،
يتوقع 47٪ من الزوار تحميل موقع الويب في أقل من ثانيتين. 40٪ من الزوار سيغادرون الموقع إذا استغرق تحميله أكثر من 3 ثوان.
يقول مؤلف المادة ، التي ننشر ترجمتها اليوم ، أنه مع مراعاة الأرقام المذكورة أعلاه ، يصبح من الواضح أن الأداء هو الشيء الذي يجب على مطوري الويب تذكره دائمًا. فيما يلي 12 نصيحة لتحسين أداء مشاريع JS.
1. استخدام آليات التخزين المؤقت المتصفح
هناك طريقتان رئيسيتان لتخزين البيانات مؤقتًا باستخدام المتصفحات. الأول هو استخدام Cache JavaScript JavaScript API ، والتي تتم معالجتها بواسطة العاملين في الخدمة. والثاني هو ذاكرة التخزين المؤقت HTTP العادية.
غالبًا ما يتم استخدام البرامج النصية لتنظيم الوصول إلى كائنات معينة. إذا قمت بتخزين مرجع إلى كائن تحتاج غالبًا إلى الوصول إليه في متغير ، وأيضًا إذا كنت تستخدم هذا المتغير في عمليات متكررة تتطلب الوصول إلى الكائن ، فيمكنك تحسين أداء التعليمات البرمجية.
2. تحسين رمز لتلك البيئات التي سيتم تشغيلها
من أجل تقييم التحسينات التي أدخلت على البرنامج بشكل كاف ، يوصى بتكوين مجموعة من البيئات التي يمكن إجراء قياسات فيها.
في الممارسة العملية ، لن تكون قادرًا على إجراء أبحاث حول أداء الكود ، على سبيل المثال ، في جميع الإصدارات الموجودة من محركات JS ، وكذلك تحسين الكود لجميع البيئات التي يمكنه تشغيلها. ولكن تجدر الإشارة إلى أن اختبار التعليمات البرمجية في أي بيئة واحدة ليس أيضًا أفضل ممارسة. مثل هذا النهج يمكن أن يعطي نتائج مشوهة. لذلك ، من المهم إنشاء مجموعة من البيئات التي سيتم تشغيل الشفرة فيها على الأرجح ، واختبار المشروعات في هذه البيئات.
3. تخلص من رمز JS غير المستخدم
من خلال إزالة التعليمات البرمجية غير المستخدمة من المشروع ، لن يتم تحسين وقت تحميل المستعرض للنصوص البرمجية فحسب ، بل سيتم أيضًا تحسين الوقت اللازم للمتصفحات لتحليل الشفرة وتجميعها. للتخلص من التعليمات البرمجية غير المستخدمة ، يجب الانتباه إلى ميزات المشروع. لذلك ، إذا وجدت بعض الوظائف التي لا يعمل معها المستخدمون ، فكر في إزالتها من المشروع ، وفي الوقت نفسه ، فكر في رمز JS المرتبط به. نتيجة لذلك ، سيتم تحميل الموقع بشكل أسرع ، وسيكون الإعداد للعمل في المتصفح أسرع. سيكون لهذا تأثير مفيد على مرات الظهور التي سيختبرها المستخدمون في الموقع. عند تحليل مشروع ما ، ضع في اعتبارك أنه ، على سبيل المثال ، قد يتم تضمين مكتبة معينة مدرجة في تركيبته عن طريق الخطأ. قد لا يكون جيدا استخدامها في ذلك. الأمر يستحق التخلص منه. الأمر نفسه ينطبق على استخدام بعض التبعيات التي تنفذ ما تم تنفيذه بالفعل في المتصفحات الحديثة. كنتيجة لذلك ، فإن التبديل إلى ميزات المتصفح القياسية المكررة بواسطة هذه التبعية سيساعد في التخلص من التعليمات البرمجية غير الضرورية.
4. حفظ الذاكرة
يجدر السعي لضمان أن تستخدم مشاريع الويب تلك الذاكرة فقط ، والتي بدونها لا يمكنها القيام بها مطلقًا. الحقيقة هي أن المطور لا يمكنه أن يعرف مقدمًا مقدار الذاكرة التي يمكن الوصول إليها من خلال تطبيقه على جهاز معين. إذا كان التطبيق يستخدم بشكل غير مبرر كميات كبيرة من الذاكرة ، فإن هذا يخلق زيادة الحمل على آليات إدارة الذاكرة لمحرك متصفح JS. على وجه الخصوص ، وهذا ينطبق على جامع القمامة. مكالمات جمع القمامة المتكررة تبطئ البرامج. هذا يؤثر سلبا على قابلية استخدام المشروع.
5. استخدام آليات التحميل المؤجلة للبرامج النصية البسيطة
يريد المستخدمون تحميل صفحات الويب في أسرع وقت ممكن. لكن من غير المحتمل أن تكون هناك حاجة إلى رمز JS الكامل للمشروع للعرض الأولي للصفحة. إذا احتاج المستخدم إلى القيام ببعض الإجراءات لتفعيل رمز معين (على سبيل المثال ، انقر فوق عنصر أو انتقل إلى علامة تبويب في التطبيق) ، ثم يمكن تأجيل تحميل هذا الرمز بعد إكماله بعد التحميل الأولي للصفحة وأهم الموارد.
مع هذا النهج ، يمكنك تجنب تحميل المتصفح وتجميع قدر كبير من كود JS في البداية ، أي تجنب إبطاء إخراج الصفحة بسبب الحاجة إلى تنفيذ هذه العمليات. بعد اكتمال تنزيل كل ما هو مهم ، يمكنك البدء في تنزيل رمز إضافي. نتيجة لذلك ، عندما يحتاج المستخدم إلى هذا الرمز ، فسيكون متاحًا له بالفعل. وفقًا لنموذج
RAIL ، توصي Google بتشغيل جلسات نصوص التحميل البطيئة التي تبلغ مدتها حوالي 50 مللي ثانية. مع هذا النهج ، لن تؤثر عمليات تحميل الكود على تفاعل المستخدم مع الصفحة.
6. تجنب تسرب الذاكرة
في حالة حدوث تسرب للذاكرة في تطبيقك ، سينتج عن ذلك الصفحة المحملة التي تطلب المزيد والمزيد من الذاكرة من المستعرض. نتيجة لذلك ، يمكن أن يصل استهلاك الذاكرة في هذه الصفحة إلى هذا المستوى ، مما يؤثر سلبًا على أداء النظام بأكمله. من المحتمل أنك تواجه مشكلة مماثلة (وربما لا تحبها). من المحتمل أن تحتوي الصفحة التي حدث فيها تسرب للذاكرة على نوع من عارض الصور - مثل شريط التمرير أو "دائري".
باستخدام أدوات مطوّري برامج Chrome ، يمكنك تحليل موقعك لتسريبات الذاكرة. يتم ذلك عن طريق فحص المؤشرات باستخدام علامة تبويب الأداء. عادةً ما تأتي تسربات الذاكرة من شظايا DOM التي تمت إزالتها من الصفحة ، ولكنها مرتبطة ببعض المتغيرات. هذا يمنع أداة تجميع مجمعي البيانات المهملة من مسح الذاكرة التي تشغلها البيانات في أجزاء DOM غير الضرورية.
7. إذا كنت بحاجة إلى القيام ببعض الحوسبة الثقيلة ، فاستخدم عمال الويب
من مواد مورد MDN ، يمكنك معرفة أنه يمكن لموظفي الويب تشغيل التعليمات البرمجية في سلسلة رسائل خلفية منفصلة عن سلسلة الرسائل الرئيسية لتطبيق الويب. ميزة هذا الأسلوب هو أنه يمكن إجراء عمليات حسابية ثقيلة في سلسلة رسائل منفصلة. يتيح ذلك تنفيذ الخيط الرئيسي (المسؤول عادةً عن صيانة واجهة المستخدم) دون حظر أو إبطاء.
يسمح لك موظفو الويب بإجراء عمليات حسابية تستخدم المعالج بشكل مكثف ، بينما لا تحظر دفق واجهة المستخدم. تتيح لك هذه التقنية إنشاء سلاسل رسائل جديدة ومنحها مهام ، الأمر الذي له تأثير مفيد على أداء التطبيق. باستخدام هذا النهج ، لا تمنع المهام التي تستغرق وقتًا طويلاً لإنجازها تنفيذ المهام الأخرى. عند تنفيذ مهام مماثلة في سلسلة الرسائل الرئيسية ، يتم حظر المهام الأخرى.
8. إذا قمت بالوصول إلى عنصر DOM عدة مرات ، احفظ الرابط في متغير
الحصول على إشارة إلى عنصر DOM عملية بطيئة. إذا كنت ستصل إلى عنصر ما عدة مرات ، فمن الأفضل حفظ رابط إليه في متغير محلي. ولكن من المهم هنا أن تتذكر أنه إذا تمت إزالة العنصر ، الذي يتم تخزين الرابط إليه في المتغير ، لاحقًا من DOM ، فأنت بحاجة إلى إزالة الارتباط إليه من المتغير. على سبيل المثال ، يمكنك القيام بذلك عن طريق كتابة
null إلى متغير. هذا سوف تجنب تسرب الذاكرة.
9. تسعى إلى إعلان المتغيرات في نفس النطاق الذي سيتم استخدامها فيه.
JavaScript ، عند محاولة الوصول إلى متغير ، يبحث أولاً عن ذلك في النطاق المحلي. إذا لم يظهر هناك ، فسيستمر البحث في النطاق ، حيث يتم تضمين النطاق المحلي. يحدث هذا حتى يتم التحقق من المتغيرات العامة. حفظ المتغيرات في النطاقات المحلية يسرع الوصول إليها.
حاول ، دون الحاجة الخاصة ، عدم استخدام الكلمة
var عند الإعلان عن المتغيرات. بدلاً من ذلك ، استخدم الكلمات الأساسية لـ
let و
const لإعلان المتغيرات والثوابت ، على التوالي. أنها تختلف في نطاق كتلة وبعض الميزات المفيدة الأخرى. انتبه إلى استخدام المتغيرات في الوظائف ، مع محاولة التأكد من أن المتغيرات التي تصل إليها داخل الوظيفة محلية. كن على دراية بالمشاكل التي يمكن أن يسببها الإعلان الضمني للمتغيرات العالمية.
10. حاول عدم استخدام المتغيرات العالمية
توجد متغيرات عمومية أثناء تشغيل البرنامج النصي بالكامل. يتم إتلاف المتغيرات المحلية عند إتلاف النطاق المحلي. لذلك ، يجب استخدام المتغيرات العالمية فقط عندما يكون ذلك ضروريًا حقًا.
11. قم بتطبيق تحسينات كود JavaScript التي ستطبقها على البرامج المكتوبة بلغات أخرى
- دائما استخدام الخوارزميات مع أصغر تعقيد حسابي ممكن ، حل المشاكل باستخدام هياكل البيانات الأمثل.
- تحسين الخوارزميات المستخدمة للحصول على نفس النتائج مع عدد أقل من العمليات الحسابية.
- تجنب المكالمات المتكررة.
- تصميم قطع متكررة من الحوسبة كوظائف.
- تبسيط حسابات الرياضيات.
- استخدم صفائف البحث بدلاً من بنيات التبديل / الحالة.
- نسعى جاهدين للتأكد من أن الشروط المحددة في الإنشاءات الشرطية تأخذ في كثير من الأحيان قيمًا حقيقية. وهذا يساهم في زيادة كفاءة استخدام قدرات المعالج من أجل التنفيذ الاستباقي للتعليمات.
- إذا كانت لديك الفرصة لاستخدام معاملات bitwise لتنفيذ إجراءات معينة ، فقم بذلك. يستغرق تنفيذ هذه الحسابات موارد أقل للمعالج.
12. استخدام أدوات البحوث أداء التطبيق
لاستكشاف جوانب مختلفة من مشاريع الويب ، يمكن التوصية بأداة Lighthouse. يقوم بتقييم التطبيق استنادًا إلى المؤشرات التالية: الأداء ، تطبيق الويب التدريجي ، إمكانية الوصول ، أفضل الممارسات ، تحسين محركات البحث. لا تقدم المنارة علامات فحسب ، بل تقدم أيضًا توصيات لتحسين المشروع. تم إنشاء أداة أخرى لتحليل الإنتاجية ، وهي
Google PageSpeed ، لمساعدة المطورين على استكشاف مواقعهم ومعرفة كيف يمكنهم تحسينها.
كلا من Lighthouse و PageSpeed ليسا أدوات مثالية ، لكن استخدامها يساعد على رؤية المشاكل التي قد تبدو غير مرئية للوهلة الأولى.
في قائمة Chrome ، يمكنك العثور على الأمر الذي يفتح مدير المهام. يعرض معلومات حول موارد النظام المستخدمة في علامات تبويب المتصفح المفتوحة. يمكنك الحصول على مزيد من المعلومات التفصيلية حول ما يحدث على الصفحة عن طريق فتح علامة تبويب "الأداء" في أدوات مطوري Chrome (المتصفحات الأخرى لديها أدوات مماثلة). تتيح لك علامة التبويب هذه تحليل العديد من المؤشرات المتعلقة بأداء الموقع.
علامة تبويب "الأداء" في أدوات مطوري Chromeأثناء جمع معلومات أداء الصفحة باستخدام Chrome ، يمكنك تكوين موارد المعالج والشبكة المتاحة للصفحات ، مما يسمح لك بتحديد المشكلات وحلها.
تحليل أداء صفحة كروملتحليل موقع الويب بشكل أعمق ، يمكنك استخدام واجهة برمجة تطبيقات توقيت التنقل. انها تسمح لك لقياس المؤشرات المختلفة مباشرة في رمز التطبيق.
إذا كنت تقوم بتطوير مشاريع من جانب الخادم باستخدام JavaScript باستخدام Node.js ، فيمكنك استخدام منصة NodeSource لإجراء تحليل متعمق للتطبيقات الخاصة بك. لا تؤثر القياسات التي يتم إجراؤها بواسطة أدوات هذا النظام الأساسي على المشروع. في بيئة Node.js ، كما هو الحال في المتصفح ، يمكن أن تنشأ العديد من المشاكل - مثل تسرب الذاكرة نفسه. يساعد تحليل المشروعات المستندة إلى Node.js على تحديد وإصلاح مشاكل أدائها.
النتائج
من المهم الحفاظ على توازن بين تحسين الكود وقابلية القراءة. يتم تفسير الكود بواسطة الكمبيوتر ، ولكن على الناس دعمه. لذلك ، يجب أن تكون الشفرة مفهومة ليس فقط للكمبيوتر ، ولكن أيضًا للبشر.
بالإضافة إلى ذلك ، من المفيد أن نتذكر أن الأداء يجب أن يؤخذ دائمًا في الاعتبار ، لكن لا ينبغي أن يكون أكثر أهمية من ضمان تشغيل الكود بدون أخطاء وتنفيذ قدرات التطبيقات التي يحتاجها المستخدمون.
أعزائي القراء! كيف يمكنك تحسين مشاريع JS الخاصة بك؟
