ما هي تلميحات الموارد مثل preload و prefetch و preconnect؟

Question

IT Interview Practice · Accepted Answer

**تلميحات الموارد** هي وسوم `` تخبر المتصفح بجلب أو الاتصال بالموارد مبكراً، مما يحسّن أداء التحميل. كل واحدة منها تخدم احتياجات توقيت/أولوية مختلفة. ```html ``` ## ما الذي تفعله كل واحدة - **`preload`** — "أنا بحاجة إلى هذا **للصفحة الحالية**، اجلبه الآن بأولوية عالية." للموارد الحرجة التي يكتشفها المحلل محل وقت لاحق: الخطوط (fonts)، الصور الرئيسية، الأصول المرجعية من CSS. يتطلب `as` حتى يحدد المتصفح الأولوية/الرؤوس بشكل صحيح. - **`preconnect`** — "سأتصل بهذا **الأصل (origin)** قريباً؛ قم بعملية البحث عن DNS + TCP + TLS handshake الآن." يوفر عدة رحلات ذهاب وإياب قبل الطلب الأول لطرف ثالث (API، مضيف الخطوط، CDN). استخدمه لعدة أصول حرجة. - **`dns-prefetch`** — نسخة أخف من preconnect: فقط دقة DNS. خيار بديل جيد / للعديد من الأصول. - **`prefetch`** — "أنا **ربما** سأحتاج إلى هذا للـ **الملاحة التالية**؛ اجلبه بأولوية منخفضة عندما يكون المتصفح خاملاً." للصفحات/الأصول المرجحة التالية. مخزن مؤقتاً للمستقبل، وليس للصفحة الحالية. ## مثال حقيقي شائع: الخطوط ```html ``` يتم اكتشاف الخطوط في وقت متأخر (يجب على المتصفح أن يحلل CSS أولاً)، لذا فإن تحميلها مسبقاً يتجنب تأخيرات نص غير مرئي. ## تحذير: لا تفرط في التلميحات تحميل كل شيء مسبقاً يتعارض مع الغرض — فهو يتنافس مع الموارد الحرجة الفعلية على النطاق الترددي. قدّم التلميحات فقط للقليل الذي يهم أكثر. ## لماذا يهم تلميحات الموارد تختصر زمن الكمون من المسار الحرج: `preconnect` يزيل تأخير handshake للأطراف الثالثة، `preload` يعطي الأولوية للأصول الحرجة المكتشفة بوقت متأخر (الخطوط، صورة LCP)، و `prefetch` يجعل **الملاحة التالية** تبدو فورية. عند استخدامها بحكمة، فإنها تحسّن Core Web Vitals بشكل ملحوظ.

ما الذي تفعله كل واحدة

مثال حقيقي شائع: الخطوط

تحذير: لا تفرط في التلميحات

لماذا يهم

أسئلة ذات صلة