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

Jeff Posnick

هل أردت يومًا السماح للمتصفح بمعرفة أي خط أو نص برمجي أو مورد آخر مهم تحتاجه الصفحة بدون تأخير حدث 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> لتوفير سياق إضافي للمتصفّح حول وجهة طلب التحميل المُسبق التي يتم إجراؤها. وتضمن هذه المعلومات الإضافية أن يضبط المتصفح عناوين الطلبات المناسبة، وأن يحدد أولوية الطلب، وأن يطبّق أيّ إرشادات ذات صلة من سياسة أمان المحتوى قد تكون مطبّقة في سياق المورد الصحيح.

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

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

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