تحليل الأداء باستخدام تبويب Performance في Vue DevTools
تسجيل تحديثات المكوّنات، وتحديد عمليات إعادة العرض غير الضرورية، وقياس زمن المكوّنات
تحليل الأداء باستخدام تبويب Performance في Vue DevTools درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
لماذا نقيس الأداء
قبل التحسين، يجب أن تعرفوا أين يُستهلك الوقت. يتضمن Vue DevTools عرضاً للأداء والمخطط الزمني يسجّل عمليات تصيير المكوّنات، حتى تتمكنوا من العثور على العمل المهدَر بدلاً من التخمين.
تثبيت Vue DevTools
ثبّتوا إضافة المتصفح أو شغّلوا التطبيق المستقل. وفي مشاريع Vite، تضيف الإضافة vite-plugin-vue-devtools مفتشاً داخل التطبيق.
npm install -D vite-plugin-vue-devtoolsبدء تسجيل
افتحوا تبويب المخطط الزمني أو الأداء في DevTools واضغطوا على زر التسجيل، ثم تفاعلوا مع تطبيقكم. أوقفوا التسجيل لالتقاط نشاط التصيير خلال تلك الفترة.
المخطط الزمني لتصيير المكوّنات
يظهر تصيير كل مكوّن بوصفه حدثاً على المخطط الزمني. ويمكنكم معرفة وقت إعادة تصيير المكوّن والمدة التي استغرقها تصييره.
الرسم البياني لعمليات commit
عملية commit هي دفعة واحدة من التحديثات إلى DOM. يعرض الرسم البياني لكل عملية commit والمكوّنات التي صُيّرت خلالها، مما يتيح لكم اكتشاف عمليات commit التي تؤثر في عدد من المكوّنات يفوق المتوقع بكثير.
المخطط اللهبي لتوقيت المكوّنات
يرصّ المخطط اللهبي مدد تصيير المكوّنات الأب والابن. وتشير الأشرطة العريضة إلى عمليات تصيير بطيئة، بينما توضّح التراصّات العميقة كيفية انتقال التصيير عبر الشجرة.
تحديد عمليات التصيير المهدَرة
عملية التصيير المهدَرة هي تصيير مكوّن من جديد مع إنتاج الناتج نفسه. وتظهر هذه العمليات كأحداث تصيير متكررة لم يتغير نتيجتها في DOM.
المخرجات نفسها، وإعادة تصيير جديدة
من الأسباب الشائعة تمرير كائن أُنشئ حديثًا أو دالة سهمية مضمنة كـ prop في كل عملية تصيير، مما يكسر آلية memoization. وهكذا يُعاد تصيير العنصر الابن رغم أن مخرجاته الظاهرة مطابقة.
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />الإصلاح باستخدام مراجع ثابتة
ارفع الثوابت إلى نطاق أعلى، أو غلّف البيانات المشتقة داخل computed حتى يُمرَّر المرجع نفسه عبر عمليات التصيير.
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));الربط بالتفاعلات
يسجل المخطط الزمني أيضًا أحداث الفأرة ولوحة المفاتيح. طابق عملية commit بطيئة مع التفاعل الذي أطلقها لتحديد مسار التنفيذ الدقيق الذي يحتاج إلى تحسين.
عداد إعادة التصيير في مفتش المكونات
يمكن لمفتش المكونات إبراز المكونات عند تحديثها. تكشف مراقبة وميض عداد مع كل تغيير غير مرتبط في الحالة عن إعادة التصيير المفرطة فورًا.
تحقق سريع
ماذا يمثّل مخطط commit في تبويب الأداء؟
مراجعة
استخدم تبويب الأداء/المخطط الزمني في Vue DevTools لتسجيل عمليات التصيير. يوضح مخطط commit كل عملية تفريغ لـ DOM والمكونات التي صُيّرت خلالها، بينما يكشف مخطط اللهب عمليات التصيير البطيئة. ابحث عن عمليات إعادة التصيير المهدرة، أي المكونات التي يُعاد تصييرها دون تغيّر مخرجاتها، وغالبًا ما يكون السبب مراجع prop غير الثابتة، ثم أصلحها باستخدام ثوابت مرفوعة أو computed.
الأسئلة الشائعة
هل درس «تحليل الأداء باستخدام تبويب Performance في Vue DevTools» مجاني؟
نعم — نص درس «تحليل الأداء باستخدام تبويب Performance في Vue DevTools» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحليل الأداء باستخدام تبويب Performance في Vue DevTools»؟
تسجيل تحديثات المكوّنات، وتحديد عمليات إعادة العرض غير الضرورية، وقياس زمن المكوّنات تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «تحليل الأداء باستخدام تبويب Performance في Vue DevTools»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-memo للتخزين المؤقت للقوالب
- تحليل الأداء باستخدام تبويب Performance في Vue DevTools
- التمرير الافتراضي للقوائم الكبيرة
- Web Workers مع Vue