קביעת סדר העדיפויות של המשאבים באמצעות link 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> כדי לתת לדפדפן הקשר נוסף לגבי היעד של הבקשה לטעינה מראש שנשלחת. המידע הנוסף הזה מבטיח שהדפדפן יגדיר כותרות מתאימות לבקשות, עדיפות של בקשות ויחיל את כל סעיפי Content Security Policy הרלוונטיים שעשויים להיות קיימים בהקשר הנכון של המשאבים.

ללמוד (הרבה) יותר

יואב וייס כתב את המדריך האולטימטיבי לשימוש ב-<link rel="preload">. אם זה מעניין אותך ואתה רוצה להתחיל להשתמש בו בדפים שלך, מומלץ לקרוא את המאמר שלו כדי לקבל מידע נוסף על היתרונות ועל תרחישי שימוש יצירתיים.

<link rel="preload"> מחליף את <link rel="subresource">, שיש לו באגים וחסרונות משמעותיים, ומעולם לא הוטמע בדפדפנים שהם לא Chrome. לכן, Chrome 50 מסיר את התמיכה ב-<link rel="subresource">.