من بين الاقتراحات (1) من JavaScript على تحسين أداء موقع الويب ، يتم تقديم العديد من الاقتراحات لتحسين أداء موقع الويب من طلبات HTTP إلى عرض الصفحة. هذه المقالة هي ملخص من منظور أداء JavaScript بعد تعلم كتاب آخر من قبل ستيف ساوندرز ، "دليل متقدم لبناء موقع الويب عالي الأداء".
أداء JavaScript هو مفتاح تطبيق تطبيقات الويب عالية الأداء
-Sounders Steve
1. استخدم سلسلة نطاق JS
سلسلة النطاق
عند تنفيذ جزء من رمز JavaScript (رمز أو وظيفة عالمية) ، سيقوم محرك JavaScript بإنشاء نطاق له ، والمعروف أيضًا باسم سياق التنفيذ. بعد تحميل الصفحة ، سيتم إنشاء نطاق عالمي أولاً ، ثم سيتم تنفيذ كل وظيفة ، سيتم إنشاء نطاق مقابل ، وبالتالي تشكيل سلسلة نطاق. يحتوي كل نطاق على سلسلة نطاق مقابلة ، ورأس السلسلة هو النطاق العالمي ، وذيل السلسلة هو نطاق الوظيفة الحالي.
الغرض من سلسلة النطاق هو تحليل المعرفات. عند إنشاء الوظيفة (لم يتم تنفيذها) ، ستتم إضافة هذه الوسائط والمعلمات المسماة وجميع المتغيرات المحلية في الوظيفة إلى النطاق الحالي. عندما تحتاج JavaScript إلى العثور على المتغير X (تسمى هذه العملية دقة متغيرة) ، فسيبحث أولاً عن ما إذا كانت هناك سمة X من نهاية السلسلة في سلسلة النطاق ، أي النطاق الحالي. إذا لم يتم العثور على ذلك ، فاستمر في البحث على طول سلسلة النطاق حتى رأس السلسلة ، أي سلسلة النطاق العالمية ، ولم يتم العثور على المتغير ، ويعتقد أنه لا يوجد متغير X في سلسلة نطاق هذا الرمز ، واستثناء خطأ مرجعي (مرجع).
تعتبر إدارة عمق سلسلة النطاق طريقة بسيطة لتحسين الأداء مع وجود كمية صغيرة من العمل. يجب أن نتجنب سرعات التنفيذ البطيئة بسبب النمو غير المقصود لسلسلة النطاق.
استخدم المتغيرات المحلية (سلاسل النطاق القصير قدر الإمكان)
إذا فهمنا مفهوم سلسلة النطاق ، فيجب أن نكون واضحين أن متغيرات تحليل محرك JavaScript ترتبط بعمق سلسلة النطاق. من الواضح أن المتغيرات المحلية في نهاية السلسلة ولها أسرع سرعة وصول. لذلك ، هناك تجربة جيدة هي: عند استخدام أي متغير غير محلي أكثر من مرة ، يرجى استخدام المتغيرات المحلية لتخزينها ، على سبيل المثال:
وظيفة changeiv () {document.getElementById ('mydiv'). className = 'change' ؛ document.getElementById ('mydiv'). style.height = 150 ؛}هنا ، يتم الرجوع إلى عنصر MyDiv Dom مرتين. للحصول على مرجع أسرع ، يجب علينا تخزينه بمتغير محلي. فوائد القيام بذلك لا تقصر فقط سلسلة النطاق ، ولكن أيضًا تجنب الاستفسارات المكررة لعناصر DOM:
وظيفة تم تغييرها () {var mydivstyle = document.getElementById ('mydiv'). style ؛ mydiv.classname = 300 ؛ mydiv.style.height = 150 ؛}تجنب الاستخدام مع (لا تنمو سلاسل النطاق)
بشكل عام ، أثناء تنفيذ التعليمات البرمجية ، يتم إصلاح سلسلة نطاق الوظيفة ، ولكن مع يمكن أن تزيد مؤقتًا من سلسلة نطاق الوظيفة. مع يستخدم لعرض خصائص الكائن كمتغيرات محلية لتسهيل الوصول إليها ، على سبيل المثال:
var user = {name: 'Vicfeel' ، العمر: '23 '} ؛ function showUser () {var local = 0 ؛ with (user) {console.log ("name" + name) ؛ console.log ("Age" + Age) ؛ console.log (local) ؛}} showuser () ؛في هذا المثال ، تتم إضافة نطاق مؤقت إلى نهاية سلسلة نطاق العرض ، التي تخزن جميع خصائص كائن المستخدم ، أي سلسلة النطاق مع الرمز. في هذا الرمز ، مثل المتغيرات المحلية مثل التغيير المحلي من الكائن الأول في نهاية السلسلة إلى الثانية ، مما يبطئ بشكل طبيعي وصول المعرفات. حتى ينتهي البيان ، تستأنف سلسلة النطاق النمو. بسبب هذا العيب مع ، يجب أن نحاول تجنب استخدام الكلمة الرئيسية.
2 التحكم في التدفق أكثر معقولة
مثل لغات البرمجة الأخرى ، فإن JavaScript لديها بعض عبارات التحكم في التدفق (الحلقات ، والظروف ، وما إلى ذلك) ، واستخدام العبارات المناسبة على كل رابط يمكن أن يحسن سرعة تشغيل البرنامج النصي بشكل كبير.
الحكم السريع للحالة
عندما يتعلق الأمر بالحكم المشروط ، فإن الطريقة الأولى لتجنب:
if (value == 0) {return result0 ؛} آخر إذا (value == 1) {return result11 ؛} آخر إذا (vale == 2) {return result2 ؛} آخر if (value == 3) {return return3 ؛}} else (value == 4) {return result 4 ؛ النتيجة 7 ؛}المشكلة الرئيسية في هذه الطريقة لاستخدام ما إذا كان للحكم الشرطي هو أن المستوى عميق للغاية. عندما أريد القيمة = 7 ، يستهلك الوقت أطول بكثير من القيمة = 0 ، والذي يفقد الأداء بشكل كبير ويسهد قابلية القراءة.
طريقة أفضل لإصدار الأحكام مع التبديل.
swithc (value) {case 0: return result0 ؛ case 1: return result1 ؛ case 2: return result 2 ؛ case 3: return return 3 ؛ case 4: return return 4 ؛ case 5: return result 5 ؛ case 6: return result6 ؛ default:هذا لا يحسن قابلية القراءة فحسب ، بل يتطلب أيضًا وقت استعلام أسرع من. ولكن إذا كان أسرع من التبديل إذا كان هناك حالة أو شرطين فقط
في JavaScript ، هناك طريقة أخرى للاستعلام عن الشرطية. كان المثال السابق هو إرجاع قيم مختلفة وفقًا للقيمة ، والتي تصادف أنها قادرة على استخدام المصفوفات لتنفيذ استعلام رسم الخرائط لجداول التجزئة.
.
تكون طريقة الصفيف هذه أكثر فاعلية عندما يكون نطاق الاستعلام كبيرًا ، لأنه لا يتعين عليه اكتشاف الحدود العلوية والسفلية ، ويحتاج فقط إلى ملء قيمة الفهرس للاستعلام. قيوده هو أن الشرط يتوافق مع قيمة واحدة بدلاً من سلسلة من العمليات. لذلك ، يجب أن نجمع بشكل شامل بين الموقف الفعلي ، واختيار طريقة الحكم المناسبة للشروط ، وزيادة الأداء.
دورة سريعة
هناك 4 طرق حلقة في JavaScript للحلقة ، حلقة القيام بها ، في حين حلقة وحلقة من أجل. فيما يلي طريقة إعادة التدوير شائعة الاستخدام:
VAR DATIORS = [1،2،3،4،5]
يمكننا أن نرى أن التحسين الأكثر وضوحًا لهذا الرمز هو القيم. الطول. كل حلقة يجب أن أقارنها بطول القيم. الاستعلام عن سمات الاستعلام أكثر استهلاكًا للوقت من المتغيرات المحلية. إذا كان عدد الحلقات أكبر ، فكلما كان الأمر أكثر أهمية. لذلك ، يمكن تحسينه مثل هذا:
VAR DATIONS = [1،2،3،4،5]
يمكن أن يستمر هذا الرمز أيضًا في التحسين ، مما يقلل من متغير الحلقة إلى 0 بدلاً من إضافة الطول الكلي.
VAR DATIONS = [1،2،3،4،5]
هنا ، يتم تحويل نهاية الحلقة للمقارنة مع 0 ، وبالتالي فإن سرعة كل حلقة أسرع. اعتمادًا على تعقيد الحلقة ، يمكن أن يوفر هذا التغيير البسيط حوالي 50 ٪ من الوقت من ذي قبل.