تصف هذه المقالة التقنيات المشتركة لـ JavaScript لتحسين الأداء. شاركه للرجوع إليه ، على النحو التالي:
1. انتبه إلى النطاق
مع زيادة عدد النطاقات في سلسلة النطاق ، يزداد الوقت للوصول إلى المتغيرات خارج النطاق الحالي. يعد الوصول إلى المتغيرات العالمية أبطأ دائمًا من الوصول إلى المتغيرات المحلية لأنك تحتاج إلى اجتياز سلسلة النطاق.
1). من الصحيح دائمًا تجنب عمليات البحث العالمية لتخزين الكائنات العالمية التي سيتم استخدامها عدة مرات في وظيفة كمتغيرات محلية.
2). تجنب ذلك ببيان مع إنشاء نطاقه الخاص ، وبالتالي زيادة طول سلسلة النطاق التي يتم تنفيذ الكود.
2. اختر الطريقة الصحيحة
يرتبط جزء من مشكلة الأداء بالخوارزمية أو الطريقة المستخدمة لحل المشكلة.
1). تجنب عمليات البحث غير الضرورية
في علوم الكمبيوتر ، يتم تمثيل تعقيد الخوارزمية برمز O. أبسط وأسرع خوارزمية هي القيمة الثابتة ، وهي O (1). بعد ذلك ، تصبح الخوارزمية أكثر تعقيدًا وتستغرق وقتًا أطول لتنفيذها. أنواع خوارزمية JavaScript الشائعة هي:
ثابت: بغض النظر عن عدد القيم الموجودة ، فإن وقت التنفيذ ثابت. بشكل عام ، يمثل قيمة بسيطة والقيمة المخزنة في متغير.
اللوغاريتمية: يرتبط إجمالي وقت التنفيذ بعدد القيم ، لكن ليس من الضروري الحصول على كل قيمة لإكمال الخوارزمية. على سبيل المثال: البحث الثنائي
الخطي: يرتبط إجمالي وقت التنفيذ مباشرة بعدد القيم. على سبيل المثال: تكرار من خلال جميع العناصر في صفيف
المربع: يرتبط إجمالي وقت التنفيذ بعدد القيم ، ويجب الحصول على كل قيمة على الأقل في الأوقات. على سبيل المثال: أدخل الفرز
Cube: يرتبط إجمالي وقت التنفيذ بعدد القيم ، ويجب أن تحصل كل قيمة على المربعات الأقل من n.
يعد استخدام المتغيرات والصفائف أكثر كفاءة من الوصول إلى الخصائص على الكائنات. يستغرق البحث عن أي سمة على كائن وقتًا أطول من الوصول إلى متغير أو صفيف ، لأنه يجب البحث في خاصية بهذا الاسم في سلسلة النموذج الأولي.
بشكل عام ، طالما يمكن تقليل تعقيد الخوارزمية ، يجب تقليله قدر الإمكان. استخدم أكبر عدد ممكن من المتغيرات المحلية لاستبدال عمليات البحث عن الممتلكات مع بحث القيمة. علاوة على ذلك ، إذا كان بإمكانك الوصول إليها من خلال مواضع صفيف رقمية ، أو استخدام سمات مسموسة (مثل الكائنات nodelist) ، فاستخدم موضع الصفيف.
2). تحسين الحلقة
أ. تكرار الضعف في كثير من الحالات ، فإن المتكررين الذين يبدأون من الحد الأقصى للقيمة ويضعف باستمرار في الحلقة أكثر كفاءة.
ب. شروط الإنهاء المبسطة لأن كل عملية دورة تحسب حالة الإنهاء ، يجب ضمانها في أسرع وقت ممكن.
ج. جسم حلقة مبسطة يكون الجسم الحلقة هو الأكثر أداء ، لذا تأكد من تحسينه إلى أقصى حد. تأكد من عدم وجود حسابات مكثفة يمكن إزالتها بسهولة من الحلقة.
د. الأكثر استخدامًا بشكل شائع من أجل الحلقات في حلقات ما بعد الاختبار هي حلقات ما قبل الاختبار. يمكن أن تجنب حلقات ما بعد الاختبار مثل التفسير الإنهاء الأولي لحساب الحالة وبالتالي أسرع.
3). قم بتوسيع الحلقة عند تحديد عدد الحلقات ، فإن التخلص من الحلقة واستخدام مكالمات وظائف متعددة غالباً ما يكون أسرع. على سبيل المثال ، جهاز داف الشهير
4). تجنب التفسير المزدوج
عندما يريد JavaScript Code تحليل JavaScript ، سيكون هناك عقوبة التفسير المزدوج. المثال التالي:
eval ("Alert ('Hello World!')") ؛ // بعض الرموز تقوم بتقييم القيممُثَبَّت:
تنبيه ('hello world') ؛ var sealhi = وظيفة جديدة ("Alert ('Hello World!')") ؛مُثَبَّت:
var sealhi = function () {Alert ("Hellow World! ') ؛} ؛ setTimeout ("Alert ('Hellow World!')" ، 500) ؛مُثَبَّت:
setTimeout (function) ({Alert ('Hellow World!') ؛} ، 500) ؛5). طرق أخرى
الأساليب الأصلية أسرع - كلما كان ذلك ممكنًا ، استخدم الأساليب الأصلية بدلاً من إعادة كتابة واحدة في JavaScript بنفسك. تتم كتابة الأساليب الأصلية بلغات مجمعة مثل C/C ++ ، لذلك فهي أسرع بكثير من JavaScript. الشيء الأكثر نسيان بسهولة في JavaScript هو العمليات الرياضية المعقدة التي يمكن العثور عليها في كائنات الرياضيات ؛ هذه الطرق أسرع بكثير من أي طريقة أخرى مكتوبة في جافا سكريبت ، مثل الجيب وجيب التمام.
تكون عبارات التبديل أسرع - إذا كان هناك عبارة معقدة IF -ELSE يمكن تحويلها إلى عبارة تبديل واحد ، فيمكنك الحصول على رمز أسرع. يمكنك أيضًا تنظيم عبارات الحالة في النظام الأكثر احتمالًا إلى الطلب الأقل احتمالًا لتحسين عبارات التبديل.
تكون مشغلي البتات أسرع - عند إجراء العمليات الرياضية ، تكون عمليات البتات أسرع من أي عمليات منطقية أو حسابية. يمكن أن يؤدي التحويل الانتقائي لعمليات بت إلى تحسين أداء الحسابات المعقدة بشكل كبير. على سبيل المثال ، Modulo و Logic و Sum Logic ، يمكنك التفكير في استخدام عمليات بت لاستبدالها.
3. قلل من عدد البيانات
1). إعلانات متغيرة متعددة
يحب:
// 4 عبارات --- إنها مضيعة لـ var count = 5 ؛ var color = "blue" ؛ var stable = [1،2،3] ؛ var now = new Date () ؛
تحسين:
var count = 5 ، color = "Blue" ، القيم = [1،2،3] ، noiw = new date () ؛
من السهل جدًا القيام بهذا التحسين في معظم الحالات وهو أسرع بكثير من إعلان متغير واحد بشكل منفصل.
2). أدخل القيمة التكرارية
يحب:
var name = القيم [i] ؛ i ++ ؛
تحسين:
var name = القيم [i ++] ؛
3). استخدم المصفوفات والحرفية الكائن
يحب:
VAR DATIONS = NEW ARRAY () ؛ ---> var stable = [] ؛
var obj = new Object () ؛ ---> var obj = {} ؛
4. تحسين تفاعل DOM
1). تقليل التحديثات في الموقع
بمجرد أن تحتاج إلى الوصول إلى جزء DOM هو جزء من الصفحة التي تم عرضها ، فأنت تقوم بتحديث مباشر. السبب الذي يجعله يطلق عليه تحديثًا مباشرًا هو أنه يجب تحديث الصفحة على الفور (في الموقع) لعرض المستخدم. سواء كان ذلك إدخال حرف واحد أو إزالة المقطع بأكمله ، فهناك عقوبة أداء لأن المتصفح يجب أن يعيد حساب أحجام لا حصر لها للتحديث.
مثال:
var list = document.getElementById ("MyList") ؛ لـ (var i = 0 ؛ i <10 ؛ i ++) {var item = document.createElement ("li") ؛ list.appendChild (item) ؛ item.AppendChild (document.createTextNode ("item"+i)) ؛}هذا يضيف 10 مشاريع ، وتتطلب هذه العملية ما مجموعه 20 تحديثًا في الموقع. فيما يلي تحسين الطريقة التالية لإنشاء شظايا المستندات:
var list = document.getElementById ("MyList") ؛ var fragment = document.createdOcumentFragment () ؛ for (var i = 0 ؛ i <10 ؛ i ++) {fragment.appendChild (item) ؛ item.AppendChild (document.createTextNode ("item"+i)) ؛} list.appendChlid (fragment) ؛في هذا المثال ، لا يوجد سوى تحديث مباشر واحد ، يحدث بعد إنشاء جميع المشاريع. يتم استخدام جزء المستند كمكتب نائب مؤقت لوضع المشروع الذي تم إنشاؤه حديثًا. ثم استخدم AppendChild () لإضافة جميع العناصر إلى القائمة. تذكر أنه عند تمرير AppendChild () في جزء المستند ، تتم إضافة العقد الفرعية فقط في الجزء إلى الهدف ، ولن تتم إضافة الجزء نفسه.
بمجرد أن تحتاج إلى تحديث DOM ، فكر في استخدام تجزئة المستندات لإنشاء بنية DOM ثم إضافته إلى المستند الحالي.
2). استخدام innerhtml
هناك طريقتان لإنشاء عقد DOM على الصفحة: باستخدام طرق DOM مثل CreateElement () ، و AppendChild () ، واستخدام InnerHTML لتغييرات DOM الصغيرة ، تكون كلتا الطريقتين متشابهة في الكفاءة. بالنسبة لتغييرات DOM الكبيرة ، يعد استخدام InnerHTML أسرع بكثير من استخدام طرق DOM القياسية لإنشاء نفس بنية DOM. وبالمثل ، فإن استخدام InnerHTML في وقت واحد أسرع بكثير من استخدام innerhtml عدة مرات.
3). استخدم وكيل الحدث (بسيط ، تم حذفه)
4). انتبه إلى Nodelist
يمكن أن يؤدي تقليل عدد الوصول إلى NodeList إلى تحسين أداء البرنامج النصي بشكل كبير.
يتم إرجاع الكائن Nodelist عند حدوث ما يلي:
أ. تم إجراء دعوة إلى getElementsByTagName ()
ب. احصل على خاصية eildnodes للعنصر
ج. الحصول على سمات سمات العنصر
د. تم الوصول إلى مجموعات خاصة ، مثل document.forms ، document.images ، إلخ.
من الضروري أن نفهم أنه عند استخدام كائنات nodelist ، فإن الاستخدام المعقول سيحسن بشكل كبير من سرعة تنفيذ الكود.
وظيفة خنق تم تقديمها في وقت سابق هي أيضا جانب مهم للغاية. خاصة عندما تكون الحلقات المتعددة مستهلكة للغاية للأداء ، تكون هذه الطريقة مفيدة للغاية.
PS: بالنسبة لضغط JavaScript ، فإن تقليل حجم الكود هو أيضًا وسيلة فعالة لتحسين أداء JavaScript. فيما يلي أداة ضغط عملية للغاية:
أدوات ضغط/تنسيق/تشفير JavaScript:
http://tools.vevb.com/code/jscompress
أداة ضغط JSMin Online JS:
http://tools.vevb.com/code/jsmincompress
لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.