تعرف على كيفية تسريع صفحات الويب الخاصة بك عن طريق تعديل JavaScript لإزالة الاختناقات.
جافا سكريبت أمر حيوي لتطوير الويب. اللغة وراء معظم التفاعلات والرسوم المتحركة التي تراها على مواقع الويب. ولكن يمكن أن يتسبب JavaScript أيضًا في إبطاء موقع الويب إذا كانت الشفرة مكتوبة بشكل سيئ. يمكن أن تؤدي حالات عدم الكفاءة إلى ضعف أوقات التحميل وبطء سرعة العرض.
اعتمد الممارسات التالية لتحسين سرعة وأداء موقع الويب الخاص بك.
1. تحديد المتغيرات محليًا
كمبرمج ، عليك أن تعرف كيف يعمل تحديد النطاق. هناك نوعان من المتغيرات في JavaScript: المتغيرات المحلية والمتغيرات العامة.
المتغيرات المحلية هي متغيرات تم الإعلان عنها داخل كتلة دالة. يظل النطاق داخل الوظيفة التي تم الإعلان عنها فقط. المتغيرات العامة هي متغيرات يمكن الوصول إليها في جميع أنحاء البرنامج النصي. في حالة المتغيرات العالمية ، يظل النطاق في جميع أنحاء البرنامج.
عندما تحاول الوصول إلى متغير ، يقوم المستعرض بشيء يُعرف باسم بحث النطاق. يتحقق من أقرب نطاق للمتغير ويواصل البحث حتى يجد المتغير. وبالتالي ، كلما زادت سلسلة النطاق لديك في برنامجك ، كلما استغرق الأمر وقتًا أطول للوصول إلى المتغيرات التي تتجاوز النطاق الحالي.
لهذا السبب ، من الأفضل دائمًا تحديد متغيراتك بالقرب من سياق التنفيذ. استخدم المتغيرات العالمية فقط في مناسبات نادرة ؛ عندما تريد تخزين البيانات المستخدمة في البرنامج النصي ، على سبيل المثال. سيؤدي ذلك إلى تقليل عدد النطاقات في برنامجك ، وبالتالي تحسين الأداء.
2. قم بتحميل JavaScript بشكل غير متزامن
JavaScript هي لغة برمجة ذات ترابط واحد. هذا يعني أنه بمجرد تنفيذ الوظيفة ، يجب تشغيلها حتى النهاية قبل تشغيل وظيفة أخرى. يمكن أن تؤدي هذه البنية إلى مواقف يمكن فيها للرمز حظر الخيط وتجميد التطبيق.
للحفاظ على أداء مؤشر الترابط بشكل جيد ، يجب عليك تشغيل بعض المهام المهدرة للوقت بشكل غير متزامن. عند تشغيل مهمة في حالة عدم التزامن ، فإنها لا تستهلك كل طاقة معالجة مؤشر الترابط. بدلاً من ذلك ، تنضم الوظيفة إلى قائمة انتظار الأحداث حيث يتم تشغيلها بعد تنفيذ جميع الرموز الأخرى.
تعد استدعاءات API مثالية للنمط غير المتزامن لأنها تستغرق وقتًا لحلها. لذلك بدلاً من جعله يعلق الخيط ، يمكنك استخدام مكتبة قائمة على الوعد مثل fetch API لجلب البيانات بشكل غير متزامن. بهذه الطريقة ، يمكن تشغيل التعليمات البرمجية الأخرى أثناء قيام المتصفح باسترداد البيانات من واجهة برمجة التطبيقات.
افهم تعقيدات البرمجة غير المتزامنة وستعمل على تحسين أداء التطبيق الخاص بك.
3. تجنب الحلقات غير الضرورية
استخدام الحلقات في JavaScript يمكن أن يكون مكلفًا إذا لم تكن حريصًا. يمكن أن يؤدي التنقل بين مجموعة من العناصر إلى زيادة الضغط على المتصفح.
بينما لا يمكنك بالتأكيد تجنب الحلقات في التعليمات البرمجية الخاصة بك ، فإنك تحتاج إلى القيام بأقل قدر ممكن من العمل فيها. يمكنك استخدام تقنيات أخرى تتجنب الحاجة إلى تكرار المجموعة.
على سبيل المثال ، يمكنك تخزين طول مصفوفة في متغير مختلف ، بدلاً من قراءته أثناء كل تكرار للحلقة. إذا حصلت على ما تريده من حلقة ، فقم بالخروج منها على الفور.
4. تصغير كود JavaScript
يعتبر التصغير طريقة فعالة لتحسين كود JavaScript. يقوم المصغّر بتحويل شفرة المصدر الأولية إلى ملف إنتاج أصغر. يقومون بإزالة التعليقات ، وتقليم البنية غير الضرورية ، وتقصير أسماء المتغيرات الطويلة. يقومون أيضًا بإزالة التعليمات البرمجية غير المستخدمة وتحسين الوظائف الحالية لاستيعاب عدد أقل من الأسطر.
أمثلة على المصغرات هي Google Closure Compiler و UglifyJS و Microsoft AJAX minifier. يمكنك أيضًا تصغير الكود يدويًا عن طريق فحصه والبحث عن طرق لتحسينه. على سبيل المثال ، يمكنك تبسيط عبارات if في التعليمات البرمجية الخاصة بك.
5. ضغط الملفات الكبيرة باستخدام Gzip
معظم العملاء استخدم Gzip للضغط وفك الضغط ملفات جافا سكريبت كبيرة. عندما يطلب المستعرض موردًا ، يمكن للخادم ضغطه لإرجاع ملف أصغر في الاستجابة. عندما يتلقى العميل الملف ، يقوم بفك ضغطه. بشكل عام ، يحفظ هذا الأسلوب النطاق الترددي ويقلل من زمن الوصول ، مما يحسن أداء التطبيق.
6. تصغير وصول DOM
يمكن أن يؤثر الوصول إلى DOM على أداء تطبيقك لأنه يجب على المتصفح التحديث مع كل تحديث لـ DOM. من الأفضل تقييد وصول DOM إلى أقل تردد ممكن. إحدى الطرق للقيام بذلك هي تخزين المراجع إلى كائنات المتصفح.
يمكنك أيضًا استخدام مكتبة مثل React والتي تقوم بإجراء تغييرات على DOM الظاهري قبل دفعها إلى DOM الحقيقي. نتيجة لذلك ، يقوم المتصفح بتحديث أجزاء التطبيق التي تحتاج إلى تحديث ، بدلاً من تحديث الصفحة بأكملها.
7. تأجيل التحميل غير الضروري لجافا سكريبت
في حين أنه من الضروري أن يتم تحميل صفحتك في الوقت المحدد ، لا تحتاج جميع الوظائف إلى العمل على التحميل الأولي. افترض أن لديك زرًا قابلاً للنقر وقائمة علامة تبويب تشير إلى كود JavaScript ؛ يمكنك تأجيل كليهما إلى ما بعد تحميل الصفحة.
تحرر هذه الطريقة قوة المعالجة ، مما يسمح لك بتقديم عناصر الصفحة الضرورية في الوقت المحدد. أنت تؤخر تجميع التعليمات البرمجية التي قد تتضمن العرض الأولي للصفحة. بعد ذلك ، بمجرد انتهاء تحميل الصفحة ، يمكنك البدء في تحميل الوظائف. بهذه الطريقة ، يمكن للمستخدم الاستمتاع بوقت تحميل سريع والبدء في التفاعل مع العناصر في الوقت المحدد.
يمكنك أيضًا تضمين أصغر قدر من CSS و JavaScript في عنصر الرأس الخاص بك ، بحيث يتم تحميله على الفور. يمكن بعد ذلك أن يعيش الرمز الثانوي في ملفات .css و. js منفصلة. تتطلب هذه التقنية معرفة جيدة بـ كيف يعمل DOM.
8. استخدم CDN لتحميل JavaScript
يساعد استخدام شبكة توصيل المحتوى في تسريع وقت تحميل الصفحة ، ولكنها ليست فعالة دائمًا. على سبيل المثال ، إذا اخترت CDN بدون خادم محلي في بلد الزائر ، فلن يستفيدوا.
لحل هذه المشكلة ، يمكنك استخدام الأدوات لمقارنة العديد من شبكات CDN وتحديد أفضل أداء لحالة الاستخدام الخاصة بك. لمعرفة أفضل CDN لمكتبتك ، تحقق من cdnjs موقع إلكتروني.
9. إزالة تسرب الذاكرة
يمكن أن يؤثر تسرب الذاكرة سلبًا على أداء التطبيق. تحدث التسريبات عندما تشغل الصفحة المحملة المزيد والمزيد من الذاكرة.
مثال على تسرب الذاكرة هو عندما يبدأ متصفحك في التباطؤ بعد جلسة طويلة من العمل مع التطبيق.
يمكنك استخدام Chrome Developer Tools لاكتشاف تسرب الذاكرة في تطبيقك. الأداة تسجل الجدول الزمني في علامة تبويب الأداء. تحدث العديد من تسريبات الذاكرة نتيجة إزالة عناصر DOM. لن يقوم برنامج تجميع البيانات المهملة بإصدار الذاكرة إلا بعد أن تكون جميع المتغيرات التي تشير إلى هذه العناصر خارج النطاق.
يمكن أن تساعدك أدوات مثل Lighthouse و Google PageSpeed Insights و Chrome في اكتشاف المشكلات. يتحقق Lighthouse من مشكلات إمكانية الوصول والأداء وتحسين محركات البحث. يمكن أن تساعدك Google PageSpeed في تحسين JavaScript لتحسين أداء تطبيقك.
يوفر متصفح Chrome ميزة أدوات المطور التي يمكنك تبديلها بالنقر فوق F12 على كلمتك الرئيسية. يمكنك استخدام تحليل الأداء لتشغيل الشبكة وإيقاف تشغيلها والتحقق من استهلاك وحدة المعالجة المركزية. كما يتحقق من المقاييس الأخرى للكشف عن المشكلات التي تؤثر على موقع الويب الخاص بك.
بصفتك مطور ويب ، ستعمل كثيرًا في متصفح الويب الخاص بك. تأتي معظم المتصفحات مع مجموعة من أدوات المطورين لمساعدتك في استكشاف مشكلات موقع الويب وإصلاحها. تحتوي ميزة أدوات مطوري Google Chromes على العديد من الوظائف لمساعدتك.