rel='preload' bağlantısıyla Kaynaklarınıza Öncelik Verme

Jeff Posnick

Tarayıcınızın önemli bir yazı tipi, komut dosyası veya tarayıcı tarafından gereken diğer kaynakları kullanabilir, sayfanın kullanımını geciktirmeden onload etkinliği mi var? <link rel="preload">, web geliştiricilerinin işlerini en iyi şekilde yapmalarını sağlar tanıdık bir HTML öğesi söz dizimi kullanarak tüm öğelerin ve davranışları belirler. Bir taslak standardı olarak kabul edilir Chrome 50 sürümü.

<link rel="preload"> üzerinden yüklenen kaynaklar tarayıcıda yerel olarak depolanır ve DOM, JavaScript veya İYS'de referans verilene kadar CSS'ye dokunun. Örneğin, aşağıda bir komut dosyası dosyasının hazırlanması için önceden yüklenir ancak bu uzantı hemen yürütülürse DOM'ye bir <script> etiketi aracılığıyla dahil edilir.

<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 belirtmek için kullanılan standart özellik olduğundan, web geliştiricilerine tanıdık gelecek ve bağlı herhangi bir kaynağın URL'sini girin.

as özelliği: ancak büyük olasılıkla sizin için yenidir ve <link> öğesi bağlamında kullanılır Böylece tarayıcıya bu konuda daha fazla bağlam hedefi: önceden yükleme isteği yapılıyor. Bu ek bilgiler, tarayıcı, uygun istek başlıklarını ve istek önceliğini ayarlar. Ayrıca, İlgili tüm İçerik Güvenliği Politikaları doğru kaynak bağlamı için uygulanma ihtimali olan yönergelerdir.

Daha fazla bilgi edinin

Yoav Weiss yazdı tam kılavuz <link rel="preload"> kullanmaya başladı. Merak ediyorsanız ve kullanmaya başlamak istiyorsanız kullanıyorsanız, bu web sitesi hakkında daha fazla bilgi edinmek için ve yaratıcı kullanım alanlarını ele aldık.

<link rel="preload">, <link rel="subresource"> önemli hatalar ve dezavantajlar, Chrome dışındaki tarayıcılarda hiç uygulanmayan bir web tarayıcısıdır. Dolayısıyla, Chrome 50 desteğini kaldırır <link rel="subresource">.