تحديد أولويات الموارد باستخدام الرابط 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>
لمنح المتصفّح المزيد من السياق حول
وجهة
إجراء طلب التحميل المسبق. تضمن هذه المعلومات الإضافية
سيحدد المتصفح رؤوس الطلبات المناسبة، ويطلب الأولوية، فضلًا عن تطبيق
أي سياسة أمان محتوى ذات صلة
التي يمكن وضعها في سياق الموارد الصحيح.
تعلم (الكثير) أكثر
كتب Yoav Weiss
الدليل النهائي
إلى استخدام <link rel="preload">
. إذا أعجبك التطبيق وأردت البدء باستخدامه،
في صفحاتك الخاصة، فإنني أنصح بقراءة مقالته لمعرفة المزيد عن
المزايا وحالات الاستخدام الإبداعي
وداعًا <link rel="subresource">
يحل <link rel="preload">
محل <link rel="subresource">
، الذي يحتوي على
والأخطاء وعيوب كبيرة
والذي لم يتم تنفيذه مطلقًا في متصفحات أخرى غير Chrome. وبناءً على ذلك، فإنّ Chrome 50
إزالة دعم
<link rel="subresource">
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2016-03-13 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]
{"lastModified": "\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0623\u062e\u064a\u0631: 2016-03-13 (\u062d\u0633\u0628 \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0627\u0644\u0645\u062a\u0641\u0651\u064e\u0642 \u0639\u0644\u064a\u0647)"}
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2016-03-13 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]