تحديد أولويات الموارد باستخدام الرابط rel='preload'

Jeff Posnick

هل أردت يومًا إبلاغ المتصفّح بخط أو نص برمجي أو مورد آخر مهم ستحتاج إليه الصفحة، بدون تأخير حدث onload للصفحة؟ يمنح <link rel="preload"> لمطوّري الويب القدرة على تنفيذ ذلك باستخدام بنية عنصر HTML مألوفة مع بعض السمات الرئيسية لتحديد السلوك الدقيق. وهو مسودة معيار يتم طرحها كجزء من إصدار Chrome 50.

يتم تخزين الموارد التي يتم تحميلها من خلال <link rel="preload"> محليًا في المتصفح، وتكون غير نشطة بشكل فعّال إلى أن تتم الإشارة إليها في DOM أو JavaScript أو CSS. على سبيل المثال، في ما يلي حالة استخدام محتملة يتم فيها preloaded تحميل ملف نص برمجي، ولكن لا يتم تنفيذه على الفور، كما كان يحدث في حال تضمينه باستخدام علامة <script> في نموذج DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

ما الذي يحدث؟ يجب أن تكون سمة href المستخدَمة في هذا المثال مألوفة لمطوّري الويب، لأنّها السمة العادية المستخدَمة لتحديد عنوان URL لأي مورد مرتبط.

من المحتمل أن تكون سمة as جديدة بالنسبة إليك، ويتم استخدامها في سياق عنصر <link> لمنح المتصفّح سياقًا إضافيًا عن الوجهة لطلب التحميل المُسبَق الذي يتم تقديمه. تضمن هذه المعلومات الإضافية أنّه سيضبط المتصفّح رؤوس الطلبات المناسبة وأولوية الطلب، بالإضافة إلى تطبيق أي توجيهات لسياسة أمان المحتوى ذات الصلة التي قد تكون سارية لسياق المورد الصحيح.

تعلم (الكثير) أكثر

كتب يواف ويس الدليل النهائي لاستخدام <link rel="preload">. وإذا أعجبك ذلك وأردت البدء باستخدامه على صفحاتك الخاصة، أنصحك بقراءة مقالته لمعرفة المزيد عن المزايا وحالات الاستخدام الإبداعي.

يحلّ <link rel="preload"> محلّ <link rel="subresource"> الذي يتضمّن أخطاء وعيوبًا كبيرة، ولم يتم تنفيذه مطلقًا في متصفّحات غير Chrome. ولذلك، لن يتوافق الإصدار 50 من Chrome مع <link rel="subresource">.