هناك بالفعل العديد من الطرق لتحسين NG عبر الإنترنت. جوهر هو كل شيء عن السمات الداخلية لنطاق مراقبي $$. اليوم سأتحدث عن شيء آخر ، يبقى الجوهر دون تغيير لأن هذا عيب من NG. ومع ذلك ، أعتقد أنه طالما أنك تستخدم الطرق المناسبة ، فلا يزال من الممكن تجنب هذه المشكلات.
مقدمة
يتم اختصار AngularJS كـ NG ، وهو إطار MVVM الذي أنتجته Google. هذا يحسن كفاءة تطوير المشاريع الأمامية (في الممارسة العملية ، يمكن أن يحسن بالفعل كفاءة التنمية). يستخدم وحدات التحكم والتعليمات والخدمات لتدور حول المشروع بأكمله ، ويستخدم DI فريدة من نوعها لحل مشاكل الاتصال قبل الطبقة الثالثة. لمزيد من التفاصيل ، يرجى الرجوع إلى تحليل رمز المصدر NG الذي كتبته من قبل.
جرح نانوغرام الصعب
عندما يتعلق الأمر بالعيوب ، يجب أن نتحدث أولاً عن مبدأ ربط البيانات البسيط
سيؤدي النموذج المحدد في كل صفحة في NG إلى إضافة مستمع إلى النطاق الحالي. الحاوية الداخلية هي مجموعة $$ wachers. طالما يتغير أي نموذج على الصفحة ، سيتم تشغيل طريقة $ Digest داخل النطاق. سوف يبحث عن جميع النماذج في شجرة النطاق الحالية بدورها للتأكد من أن النماذج الموجودة في الصفحة يمكن أن تحصل على مزامنة البيانات ، لذلك هذا يستغرق وقتًا طويلاً. البيان الرسمي هو أنه عندما يظهر 2000 مستمع على الصفحة ، سينخفض أداء الصفحة بشكل كبير. لذلك ، لتحسين أداء NG ، يجب أن تبدأ من هذا الجانب.
TIP1: الربط لمرة واحدة
في الواقع ، قال شخص آخر بالفعل هذا عبر الإنترنت. هنا استخدام جديد. لقد وفر إصدار 1.3.0+ من NG بالفعل بناء جملة مدمج لدعم الموقف الذي يكون فيه النموذج ملزمًا مرة واحدة فقط. انظر المثال التالي:
الكود القديم
نسخة الكود كما يلي:
مرحبًا
رمز جديد
نسخة الكود كما يلي:
مرحبًا
يمكنك أن ترى أن بناء الجملة الجديد هو إضافة :: أمام النموذج. أعتقد أن هذا بناء الجملة أكثر ملاءمة من المكونات الإضافية الطرف الثالث المستخدمة على الإنترنت.
نسخة الكود كما يلي:
TIP2: SCOPE $. $ DIGEST VS $ SCOPE. $ تطبيق
أعتقد أن الكثير من الناس على دراية بالطريقة تطبيق $. يتم استخدامه بشكل عام عند تنفيذ التعليمات البرمجية في بيئة NG ، من أجل ضمان مزامنة البيانات للصفحة ، واتصال طريقة تطبيق $ بعد تنفيذ الكود سيؤدي إلى تشغيل $ $ Indult للتحقق من جميع النماذج في النطاق. في الواقع ، يسمى هذا بداخله ، وبعض مقتطفات الكود فقط مكتوبة أدناه.
نسخة الكود كما يلي:
...
...
$ rootscope. $ Digest
...
...
كلهم يتصلون في الواقع $ Digest بموجب نطاق الجذر لـ $ rootscope. إذن ما هو الفرق بين $ digest تحت نطاقات مختلفة؟ في الواقع ، الفرق الأكثر أهمية هو ذلك
نسخة الكود كما يلي:
$ Digest يبحث فقط عن جميع النماذج أسفل المتصل
لذلك ، مقارنة مع نطاق $ ، $ rootscope ، فإنه يوفر الكثير من الوقت للعثور على النماذج.
ومع ذلك ، إذا كنت ترغب في التأكد من مزامنة جميع بيانات النماذج على الصفحة ، فلا يزال يتعين عليك الاتصال بـ $ rootscope ، لذلك من الأفضل التفكير في البيانات التي يجب مزامنتها قبل كتابة الكود.
نصيحة 3: استدعاء NG-Repeat بأقل قدر ممكن
سيقوم NG-Repeat بإنشاء العديد من المستمعين افتراضيًا ، لذلك عندما يكون حجم البيانات كبيرًا ، فإن هذا يستهلك أداء الصفحة. أعتقد أن التكرار NG مطلوب فقط عندما تحتاج إلى تحديث قائمة البيانات بشكل متكرر ، وإلا فإنه سيكون من المهددة وضع الكثير من المستمعين هناك. في هذا الوقت ، يمكنك استخدام خدمة interpolate الخاصة بـ NG لتحليل مقتطف رمز ، على غرار محرك القالب الثابت ، والذي يعتمد بشكل أساسي على خدمة التحليل الأساسية لـ NG ، ثم تخصيص مقتطفات الرمز هذه مباشرة بعد ملء البيانات على طراز لمرة واحدة.
TIP4: حاول كتابة بناء الجملة الأصلي في الأمر
على الرغم من أن NG يوفر العديد من الإرشادات مثل NG-Show و NG-Hide ، فإن وظيفتها هي عرض أو إخفاء مقتطف رمز استنادًا إلى النموذج الحقيقي والخاطئ. على الرغم من أنها يمكن أن تنفذ متطلبات العمل بسرعة ، إلا أن هذه التعليمات ستظل تضيف المستمعين افتراضيًا. في حالة وجود مقتطفات التعليمات البرمجية هذه في تعليمات كبيرة ، فإن الطريقة الأفضل هي كتابة أساليب JQ مماثلة مثل .show () و .hide () في رابط التعليمات للتحكم فيه ، والتي يمكن أن تنقذ عدد المستمعين ، وتعليمات الأحداث المماثلة. يمكن أن تربط هذه الأحداث في التعليمات المحيطية باستخدام AddEventListener. على أي حال ، قبل كتابة التعليمات البرمجية ، من الأفضل التفكير في كيفية تقليل عدد المستمعين ، بحيث يمكن تحسين أداء الصفحة بشكل شامل.
TIP5: استخدم المرشحات بأقل قدر ممكن على الصفحة
عند إضافة مرشحات خلف النموذج في الصفحة ، سيؤدي ذلك إلى تشغيل النموذج الحالي مرتين في $ Digest ، مما تسبب في نفايات الأداء غير الضرورية. المرة الأولى هي عندما تتغير مهمة اكتشاف Watchers $$ ؛ تحدث المرة الثانية عند تعديل قيمة النموذج ، لذلك حاول استخدام بناء جملة المرشح عند أدنى مستوى ممكن. مثل ما يلي يؤثر بشكل كبير على أداء الصفحة
يوصى باستخدام خدمة مرشح $ للاتصال بوظيفة مرشح في الخلفية ، والتي يمكن أن تحسن أداء الصفحة بشكل كبير. الرمز كما يلي
نسخة الكود كما يلي:
$ filter ('filter') (صفيف ، تعبير ، مقارنة) ؛
لخص
ما سبق بعض النصائح لتحسين أداء مشاريع NG. على الرغم من أن NG قوي للغاية ، إلا أن الكود غير المنتظم سيدمر أداءه أيضًا. لذلك ، من الأفضل التفكير في مكان عدم الحاجة إلى المستمعين قبل كتابة رمز.