คุณเคยต้องการแจ้งให้เบราว์เซอร์ทราบเกี่ยวกับแบบอักษร สคริปต์ หรือทรัพยากรอื่นๆ ที่สําคัญซึ่งหน้าเว็บจําเป็นต้องใช้ โดยไม่ทำให้เหตุการณ์ 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">