เคยไหมที่คุณต้องการแจ้งให้เบราว์เซอร์ทราบเกี่ยวกับแบบอักษร สคริปต์ หรือทรัพยากรอื่นๆ ที่สำคัญซึ่งหน้าเว็บจำเป็นต้องใช้ โดยไม่ทำให้เหตุการณ์ onload ของหน้าเว็บล่าช้าไปใช่ไหม <link rel="preload"> ให้นักพัฒนาเว็บดำเนินการดังกล่าวได้โดยใช้ไวยากรณ์ขององค์ประกอบ HTML ที่คุ้นเคยกับแอตทริบิวต์หลัก 2-3 รายการเพื่อระบุลักษณะการทำงานที่แน่นอน ซึ่งเป็นมาตรฐานฉบับร่างที่จัดส่งโดยเป็นส่วนหนึ่งของการเปิดตัว Chrome 50
ทรัพยากรที่โหลดผ่าน <link rel="preload"> จะจัดเก็บไว้ในเบราว์เซอร์ภายในเครื่องและจะถูกแทนที่อย่างมีประสิทธิภาพจนกว่าจะมีการอ้างอิงใน DOM, JavaScript หรือ CSS ตัวอย่างเช่น นี่คือ Use Case ที่เป็นไปได้อย่างหนึ่งคือมีการโหลดไฟล์สคริปต์ไว้ล่วงหน้า แต่ไม่ได้ดำเนินการในทันที อย่างที่ควรจะเป็นหากรวมไว้ผ่านแท็ก <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">