Vue Academy · درس

تحديد الاختناقات وإصلاحها

حلّل الأداء وعالج اختناقات الأداء.

تحديد الاختناقات وإصلاحها درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

قِس قبل التحسين

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

Vue DevTools

تتيح لك إضافة Vue DevTools للمتصفح فحص شجرة المكوّنات والحالة التفاعلية والأحداث. تسجّل علامة تبويب Performance فيها المدة التي تستغرقها المكوّنات في التصيير، لتتمكن من اكتشاف المكوّنات البطيئة.

استخدام علامة تبويب Performance

ابدأ تسجيلًا، وتفاعل مع تطبيقك، ثم أوقف التسجيل. تعرض DevTools مخططًا زمنيًا لعمليات تصيير المكوّنات. وتُعد المكوّنات ذات أشرطة التصيير الطويلة أو المتكررة أكثر العناصر إثارة للاشتباه.

ملف تعريف أداء المتصفح

تسجّل لوحة Performance في أدوات DevTools للمتصفح الصفحة بأكملها: تنفيذ الشيفرة والتصيير والرسم. وغالبًا ما تشير كتل تنفيذ الشيفرة الصفراء الطويلة إلى عمل JavaScript مكثف أثناء التصيير.

اكتشاف إعادة التصيير المفرطة

من الاختناقات الشائعة إعادة تصيير مكوّن مرات أكثر بكثير مما هو متوقع. إذا أدى تغيير صغير إلى إعادة تصيير شجرة فرعية كبيرة، فابحث عن حالة تفاعلية مشتركة أو غياب حدود واضحة بين المكوّنات.

تصيير القوائم الكبيرة

يُعد تصيير آلاف عقد DOM دفعة واحدة بطيئًا ويستهلك قدرًا كبيرًا من الذاكرة. إذا احتوت القائمة على مئات الصفوف أو آلافها، تصبح DOM نفسها عنق الزجاجة، لا منطق البيانات لديك.

<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>

مفهوم التمرير الافتراضي

يصيّر التمرير الافتراضي الصفوف الظاهرة حاليًا في إطار العرض فقط، إضافةً إلى مخزن مؤقت صغير، ويعيد استخدام عقد DOM أثناء تمرير المستخدم. وهكذا تحتفظ قائمة تضم 10,000 عنصر ببضع عشرات من العقد فقط في DOM.

استخدام مكتبة قائمة افتراضية

تنفّذ مكتبات مثل vue-virtual-scroller ذلك نيابةً عنك. تزوّدها بالبيانات الكاملة وارتفاع الصف، وتتولى هي إدارة نافذة العرض.

import { RecycleScroller } from "vue-virtual-scroller"

// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
//   <div>{{ item.name }}</div>
// </RecycleScroller>

أخطاء إعادة التصيير المرتبطة بالمفاتيح

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

<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>

إصلاح أخطاء المفاتيح

استخدم معرّفًا ثابتًا وفريدًا كمفتاح، حتى يتمكن Vue من مطابقة العناصر بالبيانات بشكل صحيح عبر التحديثات.

<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

سير عمل عملي

اجمع الخطوات معًا: سجّل باستخدام DevTools، واعثر على أبطأ مكوّن، وتحقّق من إعادة التصيير المفرطة أو القوائم الضخمة، وطبّق الإصلاح المناسب (التخزين المؤقت لـ computed أو v-memo أو التمرير الافتراضي أو المفاتيح الثابتة)، ثم أعد القياس للتأكد من التحسّن.

اختبار سريع

اختبر معرفتك بالعثور على اختناقات الأداء.

مراجعة

حسّن الأداء بالقياس أولًا باستخدام Vue DevTools وملف تعريف أداء المتصفح، ثم استهدف اختناقات الأداء الحقيقية: إعادة التصيير المفرطة، والقوائم الضخمة (التي يُصلحها التمرير الافتراضي)، وأخطاء استخدام فهرس المصفوفة كمفتاح (التي تُصلحها المفاتيح الثابتة). أعد القياس دائمًا للتأكد. ستتعلّم بعد ذلك كيفية اختبار تطبيقات Vue.

الأسئلة الشائعة

هل درس «تحديد الاختناقات وإصلاحها» مجاني؟

نعم — نص درس «تحديد الاختناقات وإصلاحها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «تحديد الاختناقات وإصلاحها»؟

حلّل الأداء وعالج اختناقات الأداء. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «تحديد الاختناقات وإصلاحها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy