اولویت بندی منابع خود با پیوند rel='preload'

جف پوسنیک

آیا تا به حال خواسته‌اید که بدون به تأخیر انداختن رویداد onload صفحه، فونت، اسکریپت یا منابع دیگری را که برای صفحه مورد نیاز است به مرورگر اطلاع دهید؟ <link rel="preload"> به توسعه دهندگان وب قدرت می دهد تا دقیقاً این کار را انجام دهند، با استفاده از یک نحو عنصر آشنای HTML با چند ویژگی کلیدی برای تعیین رفتار دقیق. این یک پیش‌نویس استاندارد است که به عنوان بخشی از نسخه Chrome 50 ارسال می‌شود.

منابع بارگیری شده از طریق <link rel="preload"> به صورت محلی در مرورگر ذخیره می شوند و تا زمانی که در DOM، جاوا اسکریپت یا 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"> را حذف می‌کند.