التحميل المؤجّل باستخدام @defer
حمّلوا أقسام القالب عند الطلب باستخدام @defer
التحميل المؤجّل باستخدام @defer درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
التحميل المؤجل باستخدام defer
تُحمّل كتلة at-defer جزءًا من القالب واعتمادياته عند الحاجة، مما يحسّن أداء التحميل الأولي. ويُقسّم المحتوى المؤجل إلى حزمة منفصلة.
الصياغة الأساسية لـ defer
ضعوا المحتوى داخل كتلة at-defer. ويُحمّل المحتوى افتراضيًا عندما يكون المتصفح في حالة خمول.
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }سبب استخدام Defer
يساعد تأجيل المكوّنات الثقيلة أو الموجودة أسفل الجزء الظاهر من الصفحة على إبقاء الحزمة الأولية صغيرة وتسريع العرض الأول. ولا يُحمّل المكوّن إلا عند الحاجة الفعلية إليه.
كتلة placeholder
تُظهر كتلة at-placeholder المحتوى قبل تشغيل الكتلة المؤجَّلة.
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }كتلة التحميل
تظهر كتلة at-loading أثناء جلب الجزء المؤجَّل.
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }كتلة الخطأ
تُعرض كتلة at-error إذا فشل تحميل التبعيات المؤجَّلة.
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }المشغِّلات
يمكنكم التحكم في وقت بدء التحميل باستخدام المشغِّلات في عبارة on، مثل on idle وon viewport وon interaction وon hover وon timer.
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
يحمّل المشغِّل on viewport المحتوى عند ظهوره في نطاق العرض أثناء التمرير، وهو مناسب جدًا للأقسام الموجودة أسفل الجزء الظاهر من الصفحة.
on interaction وon hover
يحمّل on interaction المحتوى عندما ينقر المستخدم على العنصر النائب أو يضع التركيز عليه، بينما يحمّله on hover عندما يحوم المؤشر فوقه.
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }شرط when
يمكنكم أيضًا تشغيل التحميل استنادًا إلى تعبير منطقي باستخدام when، بحيث يبدأ التحميل عندما يصبح التعبير صحيحًا.
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }الجلب المسبق
يمكنكم جلب الجزء المؤجَّل مسبقًا بشكل منفصل عن عرضه؛ فمثلًا يمكن إجراء prefetch on idle ليكون جاهزًا قبل تشغيل مشغّل العرض.
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }تحقّق سريع: defer
تشغيل المحتوى المؤجَّل.
مراجعة: التحميل المؤجَّل
تعلّمتم استخدام كتلة at-defer للتحميل الكسول، مع كتل at-placeholder وat-loading وat-error، ومشغِّلات مثل on idle وon viewport وon interaction وon hover وon timer وwhen، بالإضافة إلى الجلب المسبق. لقد أتممتم دورة تدفق التحكم المضمَّن.
الأسئلة الشائعة
هل درس «التحميل المؤجّل باستخدام @defer» مجاني؟
نعم — نص درس «التحميل المؤجّل باستخدام @defer» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحميل المؤجّل باستخدام @defer»؟
حمّلوا أقسام القالب عند الطلب باستخدام @defer تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التحميل المؤجّل باستخدام @defer»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العرض الشرطي باستخدام @if
- التكرار باستخدام @for
- التبديل باستخدام @switch
- التحميل المؤجّل باستخدام @defer