Sayfanın onload etkinliğini geciktirmeden, sayfanın ihtiyaç duyacağı önemli bir yazı tipini, komut dosyasını veya başka bir kaynağı tarayıcıya bildirmek istediğiniz oldu mu? <link rel="preload">, davranışı tam olarak belirlemek için birkaç temel özellikle birlikte bilinen bir HTML öğesi söz dizimini kullanarak web geliştiricilerine bunu yapma gücü sunar. Bu, Chrome 50 sürümünün bir parçası olarak gönderilen bir taslak standarttır.
<link rel="preload"> aracılığıyla yüklenen kaynaklar, tarayıcıda yerel olarak depolanır ve DOM, JavaScript veya CSS'de bunlara referans verilene kadar etkin bir şekilde etkisizdir. Örneğin, bir komut dosyası dosyasının önceden yüklendiği ancak hemen yürütülmediği (DOM'ye bir <script> etiketi aracılığıyla dahil edilmesi durumunda olduğu gibi) olası bir kullanım örneğini burada görebilirsiniz.
<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>
Burada ne oluyor? Bu örnekte kullanılan href özelliği, bağlı herhangi bir kaynağın URL'sini belirtmek için kullanılan standart özellik olduğundan web geliştiricilerinin aşina olduğu bir özelliktir.
Ancak as özelliği muhtemelen sizin için yenidir ve tarayıcıya, yapılan önceden yükleme isteğinin hedefi hakkında daha fazla bağlam sağlamak için bir <link> öğesi bağlamında kullanılır. Bu ek bilgiler, tarayıcının uygun istek üst bilgilerini ve istek önceliğini belirlemesinin yanı sıra doğru kaynak bağlamı için geçerli olabilecek ilgili İçerik Güvenliği Politikası yönergelerini uygulamasını sağlar.
Daha fazla (çok) bilgi edinin
Yoav Weiss, <link rel="preload"> kullanımıyla ilgili kesin bir kılavuz yazdı. Bu konu ilginizi çekiyorsa ve aracı kendi sayfalarınızda kullanmaya başlamak istiyorsanız avantajları ve yaratıcı kullanım alanları hakkında daha fazla bilgi edinmek için bu makaleyi okumanızı öneririm.
Hoşça kal <link rel="subresource">
<link rel="preload">, önemli hataları ve dezavantajları olan ve Chrome dışındaki tarayıcılarda hiçbir zaman uygulanmayan <link rel="subresource"> ürününün yerini alır. Bu nedenle Chrome 50, <link rel="subresource"> desteğini kaldırmıştır.