Как работает ссылка rel = "preload"?

Question

Новая версия Chrome добавлена ​​поддержка <link rel="preload">. Они разместили много информации со ссылками на оригинальную документацию. Может ли кто-нибудь дать простое объяснение того, как это работает, и какая разница по сравнению со случаем без rel="preload".

Answer 1

В его базовой форме он устанавливает link, который имеет rel="preload" с высоким приоритетом. В отличие от предварительной выборки, которую браузер может решить, является ли это хорошей идеей или нет, предварительная загрузка заставит браузер сделать это.

=== Более глубокий взгляд: ===

Вот отрывок из w3c

Многие приложения требуют точного контроля над тем, когда ресурсы сгружен, обработанную, и применяется к документу. Например, загрузка и обработка некоторых ресурсов может быть отложена приложением , чтобы уменьшить конфликт ресурсов и повысить производительность начальной загрузки на . Такое поведение обычно достигается перемещением выборки ресурсов в пользовательскую логику загрузки ресурсов, определенную приложением , то есть выборки ресурсов инициируются через введенные элементы или через XMLHttpRequest, когда выполняются особые условия применения .

Однако существуют также случаи, когда некоторые ресурсы необходимо извлечь как можно раньше, но их логика обработки и выполнения составляет в зависимости от конкретных требований приложения - например, зависимость управление, условная загрузка, заказные гарантии и т. д. В настоящее время невозможно выполнить это поведение без штрафных санкций .

Объявление ресурса через один из существующих элементов (например, img, script, link) создает выборку и выполнение ресурсов. Принимая во внимание, что приложение может захотеть получить, но задержка выполнения ресурса до тех пор, пока не будет выполнено какое-либо условие. Извлечение ресурсов с помощью XMLHttpRequest в предотвращение превышения поведения приводит к серьезному штрафу за производительность, скрывая объявления ресурсов от DOM агента пользователя и предзагрузочных парсеров. Исключения для ресурсов отправляются только тогда, когда выполняется соответствующий JavaScript , который из-за обилия блокирующих скриптов на большинстве страниц представляет значительные задержки и влияет на производительность приложения. Ключевое слово preload на элементах ссылок предоставляет примитив декларативной выборки , который обращается к вышеуказанному варианту использования инициирования раннего выборки и отделяет выборку от выполнения ресурсов. Таким образом, ключевое слово preload служит в качестве примитива низкого уровня, которое позволяет приложениям создавать пользовательские загрузки и выполнения операций с загрузкой без скрытия ресурсов от пользовательского агента и с задержкой выбор извлечения ресурсов.

Например, приложение может использовать преднагрузки ключевое слово, чтобы инициировать рано, высокого приоритета, и не оказывают блокировки выборки из CSS ресурса , которые затем могут быть применены к применению при соответствующее время:

<!-- preload stylesheet resource via declarative markup --> 
<link rel="preload" href="/styles/other.css" as="style"> 
<!-- or, preload stylesheet resource via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "styles/other.css"; 
document.head.appendChild(res); 
</script> 

Вот взгляд действительно углубленные на w3c: https://w3c.github.io/preload/

Но я был бы осторожен, если вы планируете использовать его в качестве поддержки браузера не является большим, Глобальная поддержка Broswer только на 0,18%.

Вот полный список: http://caniuse.com/#search=preload