استكشاف مشكلات كفاءة تنفيذ JavaScript

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

كفاءة التنفيذ الخاصة بـ JavaScript

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

1. الاستيراد العالمي

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

نسخة الكود كما يلي:

// 1. تمريرها إلى الوحدة كمعلمة

(وظيفة (نافذة ، $) {

var xxx = window.xxx ؛

$ ("#xxx1"). xxx () ؛

$ ("#xxx2"). xxx () ؛

}) (نافذة ، jQuery) ؛

// 2. تخزين المتغيرات المحلية

وظيفة(){

var doc = document ؛

var global = window.global ؛

}

2. eval و class eval مشاكل

نعلم جميعًا أن Eval يمكنه استخدام سلسلة كرمز JS لتنفيذها ومعالجتها. يقال إن الرمز الذي تم تنفيذه باستخدام EVER أبطأ أكثر من 100 مرة من الكود الذي لا يستخدم EVER (لم أختبر الكفاءة المحددة ، وأولئك المهتمين يمكنهم اختباره)

ستقوم رمز JavaScript بإجراء عمليات "precompilation" مماثلة قبل التنفيذ: أولاً ، سيقوم بإنشاء كائن نشط في بيئة التنفيذ الحالية ، وتعيين المتغيرات المعلنة مع VAR كخصائص للكائن النشط ، ولكن في هذا الوقت لا يتم تحديد مهام هذه المتغيرات بالضبط. ومع ذلك ، إذا كنت تستخدم "eval" ، فلا يمكن تحليل الرمز في "eval" (في الواقع سلسلة) ، ولا يمكن تحليلها وتحسينها مسبقًا ، أي أن العمليات المسبقة مسبقًا لا يمكن تنفيذها. لذلك ، سيتم تقليل أدائها إلى حد كبير

في الواقع ، نادراً ما يستخدم الناس Eval الآن. ما أريد أن أتحدث عنه هنا هو سيناريو لنوعين من eval (وظيفة جديدة {} ، setTimeout ، setInterver)

نسخة الكود كما يلي:

setTimTout ("Alert (1)" ، 1000) ؛

SetInterver ("Alert (1)" ، 1000) ؛

(وظيفة جديدة ("تنبيه (1)")) () ؛

ستكون الأنواع المذكورة أعلاه من كفاءة تنفيذ التعليمات البرمجية منخفضة نسبيًا ، لذلك يوصى بتمرير طرق أو إشارات مجهولة مباشرة إلى طريقة setTimeOut.

3. بعد الانتهاء من الإغلاق ، سيتم إطلاق المتغير الذي لم يعد يتم الرجوع إليه.

نسخة الكود كما يلي:

var f = (function () {

var a = {name: "var3"} ؛

var b = ["var1" ، "var2"] ؛

var c = document.getElementByTagName ("li") ؛

// **** المتغيرات الأخرى

// *** بعض العمليات

var res = function () {

تنبيه (A.Name) ؛

}

عودة الدقة ؛

}) ()

قيمة الإرجاع للمتغير F في الكود أعلاه هي طريقة يتم إرجاعها في إغلاق يتكون من وظيفة تنفيذ فورية. يحتفظ هذا المتغير بالإشارات إلى جميع المتغيرات (A ، B ، C ، إلخ) في هذا الإغلاق. لذلك ، سوف يتواجد هذين المتغيرين دائمًا في مساحة الذاكرة ، وخاصة الإشارة إلى عنصر DOM سوف تستهلك الكثير من الذاكرة. نستخدم فقط قيمة المتغير A في الدقة. لذلك ، يمكننا تحرير المتغيرات الأخرى قبل إغلاق الإغلاق.

نسخة الكود كما يلي:

var f = (function () {

var a = {name: "var3"} ؛

var b = ["var1" ، "var2"] ؛

var c = document.getElementByTagName ("li") ؛

// **** المتغيرات الأخرى

// *** بعض العمليات

// حرر المتغيرات التي لم تعد تستخدم قبل عودة الإغلاق

ب = ج = فارغ ؛

var res = function () {

تنبيه (A.Name) ؛

}

عودة الدقة ؛

}) ()

كفاءة JS DOM DOM

أثناء عملية تطوير الويب ، غالبًا ما يكون عنق الزجاجة لكفاءة التنفيذ الأمامية في عمليات DOM. عمليات DOM هي شيء يستهلك الأداء للغاية. كيف يمكننا محاولة حفظ الأداء أثناء عمليات DOM؟

1. تقليل الجمع

ما هو ريبو؟

عندما يتغير خصائص عنصر DOM (مثل اللون) ، سيقوم المتصفح بإخطار العرض بإعادة تعريف العنصر المقابل. وتسمى هذه العملية إعادة الطلاء.

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

كيف تقلل من الثوب

أولاً ، قم بحذف العنصر من المستند ، وبعد الانتهاء من التعديل ، ثم أعد العنصر إلى موضعه الأصلي (عندما يتم تنفيذ عدد كبير من عمليات الإنحدار على عنصر معين وعناصره الفرعية ، ستكون تأثيرات الطرق 1 أو 2 أكثر وضوحًا)

قم بتعيين عرض العنصر على "لا شيء" ، وبعد الانتهاء من التعديل ، قم بتعديل الشاشة إلى القيمة الأصلية

حدد الفصل الدراسي عند تعديل سمات النمط المتعددة بدلاً من تعديل سمات النمط عدة مرات (موصى بها من قبل بعض الطلاب)

استخدم DocumentFragment عند إضافة كميات كبيرة من العناصر إلى الصفحة

على سبيل المثال

نسخة الكود كما يلي:

لـ (var i = 0 ؛ i <100: i ++) {

var child = docuemnt.createlement ("li") ؛

child.innerhtml = "child" ؛

document.getElementById ("Parent"). AppendChild (Child) ؛

}

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

عند البحث عن عناصر DOM ، حاول تجنب اجتياز عناصر الصفحات في مساحات كبيرة ، حاول استخدام محددات دقيقة ، أو تحديد سياق لتضييق نطاق البحث ، مع أخذ jQuery كمثال

استخدم محددات مطابقة أقل غموضًا: على سبيل المثال $ ("[name*= '_ fix']") ، استخدم المزيد من المحددات المركب مثل المعرف وتضييق النطاق تدريجياً $ ("li.active") ، إلخ.

حدد السياق: على سبيل المثال $ ("#parent .class") ، $ (". class" ، $ el) وما إلى ذلك

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

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

المبدأ الأساسي: نعلم جميعًا أن الأحداث ستقاطع في مواصفات DOM ، أي أن أحداث أي عنصر ستخطو إلى أعلى خطوة بخطوة وفقًا لهيكل شجرة DOM. يوفر كائن الحدث أيضًا Event.Target (srcelement تحت IE) للإشارة إلى مصدر الحدث ، حتى نتمكن من العثور على العنصر الأكثر أصالة الذي يؤدي إلى حدوث الحدث حتى لو استمعنا إلى الحدث على العنصر الأصل. هذا هو المبدأ الأساسي للوفبة. دون مزيد من اللغط ، المثال أعلاه

بناءً على مبدأ مراقبة الأحداث التي تم تقديمها أعلاه ، دعنا نعيد كتابتها.

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

بناء الجملة يشبه $ (محدد) .Delegate (ChildSefer ، الحدث ، البيانات ، الوظيفة) ، على سبيل المثال:

نسخة الكود كما يلي:

$ ("div"). تفويض ("زر" ، "انقر" ، دالة () {

$ ("p"). slidetoggle () ؛

}) ؛

وصف المعلمة (مقتبس من W3School)

وصف المعلمة

مطلوب تشويش الطفل. يحدد أن يتم إرفاق عناصر طفل أو أكثر من معالج الأحداث.

الحدث مطلوب. يحدد حدث أو أكثر من الأحداث المرفقة بالعنصر. افصل قيم الأحداث المتعددة حسب المسافات. يجب أن يكون حدثًا صالحًا.

البيانات اختيارية. يحدد البيانات الإضافية التي تم تمريرها إلى الوظيفة.

الوظيفة المطلوبة. يحدد الوظيفة التي يتم تشغيلها عند حدوث حدث ما.

نصائح: ميزة أخرى لتفويض الأحداث هي أنه حتى الأحداث التي يتم تشغيلها على العناصر التي تمت إضافتها ديناميكيًا بعد أن يمكن سماع ربط الحدث ، بحيث لا يتعين عليك ربط الأحداث في كل مرة تضيف فيها عنصرًا ديناميكيًا إلى الصفحة.