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

جيف بوسنيك

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

يتم تخزين الموارد التي يتم تحميلها عبر <link rel="preload"> محليًا في المتصفح، وتكون غير نشطة إلى أن تتم الإشارة إليها في DOM أو JavaScript أو CSS. على سبيل المثال، إليك حالة استخدام محتملة تم فيها تحميل ملف نص برمجي مسبقًا، ولكن لا يتم تنفيذه على الفور، كما يحدث في حال تضمين الملف من خلال علامة <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. وبالتالي، فإن Chrome 50 يزيل الدعم لـ <link rel="subresource">.