การจัดลำดับความสำคัญของทรัพยากรด้วยลิงก์ 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">