Pernahkah Anda ingin memberi tahu browser tentang font, skrip, atau
resource lain yang penting yang akan diperlukan oleh halaman, tanpa menunda peristiwa
onload
halaman? <link rel="preload">
memungkinkan developer web melakukannya, menggunakan sintaksis elemen HTML yang sudah dikenal dengan beberapa atribut utama untuk
menentukan perilaku yang tepat. Ini adalah
standar draf yang dikirimkan sebagai bagian dari
rilis Chrome 50.
Resource yang dimuat melalui <link rel="preload">
disimpan secara lokal di browser,
dan tidak aktif secara efektif hingga direferensikan dalam DOM, JavaScript, atau
CSS. Misalnya, berikut adalah satu kasus penggunaan potensial ketika file skrip
telah dimuat sebelumnya, tetapi tidak dijalankan dengan segera, seperti yang terjadi
jika file skrip 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? Atribut href
yang digunakan dalam contoh tersebut harus
tidak asing bagi developer web, karena ini adalah atribut standar yang digunakan untuk menentukan
URL resource yang ditautkan.
Namun, atribut as
mungkin baru bagi Anda, dan digunakan dalam konteks elemen <link>
untuk memberikan lebih banyak konteks ke browser tentang
tujuan
permintaan pramuat yang dibuat. Informasi tambahan ini memastikan bahwa
browser akan menetapkan header permintaan yang tepat, prioritas permintaan, serta menerapkan
perintah Kebijakan Keamanan Konten
yang relevan yang mungkin ada untuk konteks resource yang tepat.
Pelajari lebih lanjut
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 kreatif.
Sampai jumpa <link rel="subresource">
<link rel="preload">
menggantikan <link rel="subresource">
, yang memiliki
bug dan kelemahan yang signifikan, serta
tidak pernah diterapkan di browser selain Chrome. Dengan demikian, Chrome 50
menghapus dukungan untuk
<link rel="subresource">
.