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