קביעת סדר העדיפויות של המשאבים באמצעות link rel='preload'

ג'ף פוזניק
ג'ף פוזניק
Twitter GitHub דף הבית

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