هناك بالفعل العديد من الطرق لتحسين 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 قوي للغاية ، إلا أن الكود غير المنتظم سيدمر أداءه أيضًا. لذلك ، من الأفضل التفكير في مكان عدم الحاجة إلى المستمعين قبل كتابة رمز.
ما سبق هو تنظيم وإضافة المعلومات ذات الصلة إلى معلومات التحسين AngularJS. شكرا لك على دعمك لهذا الموقع!