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