การจัดลำดับความสำคัญของทรัพยากรด้วยลิงก์ rel='โหลดล่วงหน้า'

Jeff Posnick

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