Pernahkah Anda ingin memberi tahu browser tentang font, skrip, atau
resource penting lain yang akan diperlukan oleh halaman, tanpa menunda peristiwa
onload
halaman? <link rel="preload">
memberi developer web kemampuan untuk
melakukan hal tersebut, menggunakan sintaksis elemen HTML yang sudah dikenal dengan beberapa atribut utama untuk
menentukan perilaku yang tepat. Versi ini adalah draf standar yang dikirimkan sebagai bagian dari rilis Chrome 50.
Resource yang dimuat melalui <link rel="preload">
disimpan secara lokal di browser, dan secara efektif tidak aktif hingga resource tersebut direferensikan di DOM, JavaScript, atau CSS. Misalnya, berikut adalah satu kasus penggunaan potensial saat file skrip
dipramuat, tetapi tidak langsung dieksekusi, seperti jika
disertakan melalui tag <script>
di 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>
Jadi apa yang terjadi di sini? Atribut href
yang digunakan dalam contoh tersebut harus tidak asing bagi developer web, karena atribut ini adalah atribut standar yang digunakan untuk menentukan URL resource tertaut.
Namun, atribut as
mungkin baru bagi Anda, dan digunakan dalam konteks elemen <link>
untuk memberikan konteks yang lebih lengkap kepada browser tentang
tujuan dari
permintaan pramuat yang dibuat. Informasi tambahan ini memastikan bahwa
browser akan menetapkan header permintaan yang sesuai, prioritas permintaan, serta menerapkan
perintah Kebijakan Keamanan Konten
yang relevan dan mungkin tersedia untuk konteks resource yang tepat.
Pelajari (lebih banyak)
Yoav Weiss menulis panduan definitif tentang penggunaan <link rel="preload">
. Jika Anda tertarik dan ingin mulai menggunakannya
di halaman Anda sendiri, sebaiknya baca artikelnya untuk mempelajari lebih lanjut
manfaat dan kasus penggunaan yang kreatif.
Sampai jumpa <link rel="subresource">
<link rel="preload">
menggantikan <link rel="subresource">
, yang memiliki
bug dan kekurangan yang signifikan, dan
yang tidak pernah diterapkan di browser selain Chrome. Dengan demikian, Chrome 50
menghapus dukungan untuk
<link rel="subresource">
.