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