קביעת סדר העדיפויות של המשאבים באמצעות 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">.