Приоритизация ресурсов с помощью ссылки rel='preload'

Джефф Посник

Вы когда-нибудь хотели сообщить браузеру о важном шрифте, скрипте или другом ресурсе, который понадобится странице, не задерживая событие onload страницы? <link rel="preload"> дает веб-разработчикам возможность сделать именно это, используя знакомый синтаксис элементов HTML с несколькими ключевыми атрибутами для определения точного поведения. Это проект стандарта , который входит в состав версии 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> , чтобы предоставить браузеру больше контекста о месте назначения выполняемого запроса на предварительную загрузку. Эта дополнительная информация гарантирует, что браузер установит соответствующие заголовки запросов, приоритет запросов, а также применит все соответствующие директивы политики безопасности контента , которые могут существовать для правильного контекста ресурса.

Узнайте (намного) больше

Йоав Вайс написал подробное руководство по использованию <link rel="preload"> . Если вы заинтригованы и хотите начать использовать его на своих страницах, я бы рекомендовал прочитать его статью, чтобы узнать больше о преимуществах и вариантах творческого использования.

<link rel="preload"> заменяет <link rel="subresource"> , который имеет существенные ошибки и недостатки и который никогда не был реализован в других браузерах, кроме Chrome. Таким образом, в Chrome 50 удалена поддержка <link rel="subresource"> .

,

Джефф Посник

Вы когда-нибудь хотели сообщить браузеру о важном шрифте, скрипте или другом ресурсе, который понадобится странице, не задерживая событие onload страницы? <link rel="preload"> дает веб-разработчикам возможность сделать именно это, используя знакомый синтаксис элементов HTML с несколькими ключевыми атрибутами для определения точного поведения. Это проект стандарта , который входит в состав версии 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> , чтобы предоставить браузеру больше контекста о месте назначения выполняемого запроса на предварительную загрузку. Эта дополнительная информация гарантирует, что браузер установит соответствующие заголовки запроса, приоритет запроса, а также применит все соответствующие директивы политики безопасности контента , которые могут существовать для правильного контекста ресурса.

Узнайте (намного) больше

Йоав Вайс написал подробное руководство по использованию <link rel="preload"> . Если вы заинтригованы и хотите начать использовать его на своих страницах, я бы рекомендовал прочитать его статью, чтобы узнать больше о преимуществах и вариантах творческого использования.

<link rel="preload"> заменяет <link rel="subresource"> , который имеет существенные ошибки и недостатки и который никогда не был реализован в других браузерах, кроме Chrome. Таким образом, в Chrome 50 удалена поддержка <link rel="subresource"> .