تحديد أولويات الموارد باستخدام الرابط 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">